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

Question

我们的 CI/CD 管道停止处理“ng test”作业并失败并显示以下错误消息：

[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 运行程序执行它时，它失败了。任何帮助，将不胜感激。谢谢！

Answer 1

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

Answer 2

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

这解决了我的问题:-)

Answer 3

如果您不想更改全局node版本，可以安装本地版本并运行它。这样，无论您在什么系统上运行，您都将获得对正在运行的内容的绝对控制。

yarn add node@^14.15.0 --dev

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

希望这有所帮助！

Answer 4

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

Answer 5

长话短说

• 在 html 中使用以assets/.... 在基于组件的 CSS 中，使用向上一级的相对路径：../assets/...
• 永远不要，我的意思是永远不要使用像这样以斜线开头的资源路径，在某些情况/assets下会破坏你的代码
• 请遵循以下建议进行配置，karma.conf.js 因为 karma 不提供资产，并且目前 karma 5.1.1 与 webpack 4.44.2 或其某些插件崩溃并出现上述 OP 错误

尸检 (3)

我现在两次删除了第一个事后分析，因为它已损坏并导致我进行事后分析 (3) :D

有两件事很重要：您需要按照karma.conf.js此SO 线程中的说明进行调整。

添加

    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/src/assets即使base无处可寻，也要保留。第二部分是当前使用相对路径进行工作所需的文件模式。第三部分实际上是数组中的第二个条目proxies：分别列出从 css 访问的每个资源：/

重要的

ng预处理路径有些奇怪，上面的代码将导致从 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 的图像中，也会从 root as 请求/logo.png（删除其路径）。不幸的proxies是不支持通配符，否则可以将 /*.png` 等内容写入某些内容。但目前单独列出所有条目似乎是解决方案。

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

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

但当我想将我的角度应用程序部署到子目录中时，事情就出问题了。如果你这样做，我找不到任何方法，干预ng build --base-href '..'并混合一些东西--deploy-url来让事情发挥作用。

当您使用资产的绝对路径时，永远不要指望让事情在子目录中运行。

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