如何解决[karma-server]：TypeError：无法读取未定义的属性“范围”-CI环境中的角度单元测试

我们的CI / CD管道停止进行“ ng测试”作业，并失败，并显示以下错误消息：

[karma-server]: TypeError: Cannot read property 'range' of undefined
    at handleRangeHeaders (/builds/......../node_modules/webpack-dev-middleware/lib/util.js:131:21)
    at processRequest (/builds/......../node_modules/webpack-dev-middleware/lib/middleware.js:98:19)
    at ready (/builds/......./node_modules/webpack-dev-middleware/lib/util.js:53:12)
    at handleRequest (/builds/........../node_modules/webpack-dev-middleware/lib/util.js:182:5)
    at /builds/............/node_modules/webpack-dev-middleware/lib/middleware.js:64:7
    at new Promise (<anonymous>)
    at middleware (/builds/........../node_modules/webpack-dev-middleware/lib/middleware.js:63:12)

添加了句点以细分某些特定的回购名称

我们以前从未遇到过此错误，并且以前运行良好。同样奇怪的是，当我在本地运行它时，它可以完美运行。但是当GitLab运行程序执行它时，它就会失败。任何帮助，将不胜感激。谢谢！

解决方法

能够弄清楚。我们在.gitlab-ci.yml文件中使用了node：latest，任何被下拉的问题都会引起问题。（它看起来是版本15）。因此，我们将其设置为node：14，而不是node：latest。

这确实是节点v15上的业障问题。看起来（暂时）它不会被修复，因此降级到v14是解决方案：https://github.com/karma-runner/karma/issues/3571

如果您同时使用node：latest和node：14，则会发生此问题，这是因为它发生在v14.15.2中。如以上答案所述，您应该使用node：14.15.1，问题将消失。

我的项目迁移到 ESLint 后遇到了类似的问题。

我去掉了 tsconfig.app.json 和 tsconfig.spec.json。

Node.JS 版本都没有解决问题，但不知何故我发现这篇文章 https://ievgen.de/2020/11/17/angular-tests-fail-docker/ 基本上是说将以下行添加到您的 karma.conf.js 中：

proxies: {
  '/assets/': '/base/src/assets/'
},

这解决了我的问题:-)

如果您不想更改全局node版本，则可以安装本地版本并运行它。这样，无论您在什么系统上运行，都可以完全控制自己的运行状况。

yarn add node@^14.15.0 --dev

// package.json
{
  "scripts": {
    "test": "node_modules/node/bin/node node_modules/.bin/ng test"
  }
}

希望这会有所帮助！ ?

出于我的考虑，并且因为我喜欢javascript（我确实不喜欢），所以调试了该问题。我降级到节点14.x，仍然有问题。这是我对14.x的分析

TL; DR

添加以下提到的代理配置，并在引用内容时停止在文件中使用../assets。以斜杠开头：/assets/MyResource.png

发贴人

我在here上找到了这个人，该人提供了一些见解，但对我没有帮助，但建议您修改karma.conf.js以便基本上添加此条目的版本：

proxies: {
  '/assets/': 'src/assets/',},

他说业力无法正确加载资源，等等。我记得我在CSS中添加了一些图片作为背景。我以为，js，你差点就被我抓住了，你不是在an死图像吗？。我评论了css行，它起作用了。 WTF o_0？

所以又是调用堆栈时间了，太好了。看到之后

\client\angular5-pusher\node_modules\webpack-dev-middleware\lib\util.js在缺少的 range 的某行退出了，我进入了调用栈，来到了proxy.js。 las，山本大夫（Ievgen Yamamoto）是对的，但为什么它对我不起作用？

因为printf调试是查找错误的最有趣的方式，所以我依靠将console.log粘贴到事物中。

将console.log(req);插入\client\angular5-pusher\node_modules\karma\lib\middleware\proxy.js:98之后，我看到的一个请求对我来说似乎很奇怪。这正是我已经发现的问题所在。但是该请求很奇怪，该请求指向路径/MyImage.png。

我查看了我的css文件，代码很正常

background: url('../assets/MyImage.png') no-repeat left top;

ng serve一起工作，我惊叹于我精彩的MyImage.png

问题是，我以某种方式复制了aagular2示例，其中有人以“ ../assets”的愚蠢方式引用图像。在浏览器中运行良好时，业力将其压缩为“ /MyImage.png”，没有找到它的代理，放弃了寻找如何加载并死掉的方法。

最终的解决方案是停止使用错误的路径。

解决方案

使用以斜杠/

开头的路径

background: url('/assets/MyImage.png') no-repeat left top;

这成功了。环顾网络的人们也正在使用“ assets / MyImage”，但这在编译期间始终会失败，因为无法解析此路径。可能是我和所有其他缺乏基本的角度技巧，但谁知道的人。

我什至不知道在推向生产时这是否还能奏效，但是。

旁注：使用该解决方案需要前面提到的“代理”字符串。

[karma-server]：TypeError：无法读取未定义的属性“范围”-CI环境中的角度单元测试

如何解决[karma-server]：TypeError：无法读取未定义的属性“范围”-CI环境中的角度单元测试

解决方法

TL; DR

发贴人

解决方案

相关推荐