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

Posted 2023-02-19

【中文标题】[karma-server]：TypeError：无法读取未定义的属性“范围”-CI 环境中的 Angular 单元测试

【英文标题】：[karma-server]: TypeError: Cannot read property 'range' of undefined - Angular Unit Testing in CI environment

【发布时间】：2021-02-21 10:25:22

【问题描述】：

我们的 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)

添加句点来替换某些特定的 repo 名称

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

【问题讨论】：

看起来您的 CI/CD 可能正在对您的 node_modules 进行类型扫描；您的 tsconfig.json 中是否有“排除”：[“*/node_modules/”]？

不幸的是，我尝试过，但仍然导致同样的错误。不过谢谢！

【参考方案1】：

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

【讨论】：

我可以确认我的测试停止使用 node v15.2.0

对我来说也一样。感谢您分享您的解决方案。

也在这里@v15.3.0

与 v14.15.2 有同样的问题。切换到 v14.15.1 有效。

遇到同样的问题，14.15.3 对我有用。

【参考方案2】：

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

【参考方案3】：

如果您不想更改全局 node 版本，您可以安装本地版本并运行它。这样一来，无论您在哪个系统上运行，您都可以完全控制正在运行的内容。

yarn add node@^14.15.0 --dev

// package.json

  "scripts": 
    "test": "node_modules/node/bin/node node_modules/.bin/ng test"
  

希望这会有所帮助！ ?

【参考方案4】：

如果您使用 node:latest 以及 node:14 也会出现此问题，这是因为它发生在 v14.15.2 上。如以上答案所述，您应该使用 node:14.15.1 并且问题将消失。

【参考方案5】：

TL;DR

在 html 中使用以assets/... 开头的相对路径。在基于组件的 CSS 中，使用向上一级的相对路径：../assets/... 永远不要，我的意思是永远不要使用像 /assets 这样以斜线开头的资产路径，这会在某些情况下破坏您的代码 请按照以下建议配置 karma.conf.js，因为 karma 不提供资产，并且当前带有 webpack 4.44.2 的 karma 5.1.1 或其中的某些插件会因上述 OPs 错误而崩溃

验尸 (3)

我现在删除了我的第一次验尸两次，因为它被破坏并导致我进行验尸 (3) :D

有两件事很重要：您需要调整karma.conf.js，如SO thread 中所述。

添加

    proxies: 
      '/assets/': '/base/src/assets/'
      '/Every-single-image-from-css.png': '/base/src/assets/what-ever-the-path-is/Every-single-image-from-css.png'
    ,
    files: [
       pattern: './src/assets/**', watched: false, included: false, nocache: false, served: true 
    ],

在config.set( 部分，是的，即使找不到base，也要保留/base/src/assets。 第二部分是您需要的文件模式，以使事情能够与相对路径一起工作。第三部分实际上是proxies数组中的第二个条目：分别列出从css访问的每个资源：/

重要

ng 预处理路径 somehow strange，上面的代码将导致您从 CSS 引用的资产将被复制并在 ng build 完成后位于根目录中。非常难看，但我不知道解决方案，除了只使用来自 html 的图像，它得到正确处理。 我注意到ng serve 使所有网址变平。所以即使是一个看起来像这样的css文件

.my-img
  background: url('../assets/deeply/nested/logo.png');

将作为/logo.png 来自内置网络服务器。我在查看ng serve 制作的网站并检查网络调用时检查了这一点。

无论这种行为是什么，ng test 都会因此而死，除非您在代理部分中指定每一个图像。 使用第一个代理条目，例如/assets/ 很有趣，但仅在您使用资产中的绝对路径时才有效，当您从 html 中引用图像时，您不应该但也使用绝对路径，所以保留它！

由于 ng 编译使 url 变平，因此该代理不适用于 css 引用，因为即使在 ng test 中，来自 css 的图像也会以 /logo.png 的形式从 root 请求（去除它们的路径）。不幸的是，proxies 不支持通配符，否则可以将 /*.png` 之类的东西写到某个东西上。但目前单独列出所有条目似乎是解决方案。

为什么在资产中使用绝对路径是一个愚蠢的想法

我的第一个结果是实际上建议使用类似的路径 /assets/foo.png。这样做，只需要提到的proxies 条目（但它必须看起来有点不同）。 现在我觉得我没问题，因为ng serve 有效，ng test 有效，甚至 ng build 有效。

但是当我想将我的 Angular 应用程序部署到子目录中时，事情就发生了变化。如果您这样做，我将找不到任何方法，我只能在 ng build --base-href '..' 中混入一些 --deploy-url 以使事情顺利进行。

当您使用资产的绝对路径时，永远不要期望在子目录中工作。

因此，在某些情况下使用我的“破碎”方法可能会很幸运，但我没有骗你，遵循我在上面重复的 @programmerinprogress 的出色建议，你很可能会节省一些时间。

【讨论】：

Angular 组件的单个规范文件出现此错误。这让我发疯，因为所有其他规格都运行良好。找到这个帖子，注释掉模板中使用assets的<img>元素，规范运行成功。谢谢！！！！

出现了这个错误，我所做的只是按照SO Post 更改了 karma.conf.js，正如您所说，这是一个更优雅的解决方案，无需更改 CSS 中的 url 路径

感谢分享和更新帖子！真的很有帮助！

【参考方案6】：

我的项目迁移到 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/'
,

这解决了我的问题:-)