Angular单元测试CI环境报错：TypeError: 无法读取undefined的'range'属性

看到你遇到的这个问题——本地执行ng test完全正常，但GitLab Runner跑CI/CD时却抛出webpack-dev-middleware的TypeError，而且之前从未出现过，确实挺头疼的。我来分享几个针对性的排查和解决思路：

1. 强制依赖版本一致性，避免CI环境的隐性版本变更 #

本地和CI环境依赖版本不一致是这类问题的常见元凶。虽然你本地没问题，但GitLab Runner如果用npm install安装依赖，可能会拉取package.json中未锁定的小版本更新，导致兼容性冲突。

• 改用npm ci替代npm install：这个命令会严格按照package-lock.json或yarn.lock的版本安装依赖，确保CI环境和本地依赖完全一致。在你的CI脚本里把安装依赖的步骤改成：

  npm ci
  

• 如果问题依旧，手动锁定webpack-dev-middleware的版本：在package.json中指定你本地正常运行的具体版本，例如：

  "devDependencies": {
    "webpack-dev-middleware": "4.3.0"
  }
  

  然后更新lock文件，再推送到仓库重新运行CI。

2. 检查ng test的CI执行参数，适配无交互环境 #

CI环境是无交互的，如果ng test默认启用了watch模式，或者使用了需要图形界面的浏览器，可能会触发webpack-dev-middleware的异常行为。

修改CI中的ng test命令，添加以下参数：

ng test --watch=false --browsers=ChromeHeadless --no-progress

• --watch=false：禁用文件监听，CI环境不需要实时重新运行测试
• --browsers=ChromeHeadless：使用无头Chrome运行测试，不需要图形界面
• --no-progress：避免输出过多日志干扰排查

3. 清理GitLab Runner的依赖缓存 #

有时候CI缓存的旧依赖会导致奇怪的兼容性问题，尝试清理缓存后重新安装：

• 在GitLab项目的Settings > CI/CD > Cache中，清除现有的缓存
• 或者在CI脚本中添加清理缓存的步骤（如果使用了自定义缓存配置）

4. 排查Angular CLI的测试服务器配置 #

如果上述方法都无效，检查angular.json中test目标的devServer配置，看看是否有特殊设置导致请求处理异常：

• 确保devServer的disableHostCheck设置为true（CI环境中可能需要）：

  "test": {
    "builder": "@angular-devkit/build-angular:karma",
    "options": {
      "devServer": {
        "disableHostCheck": true
      }
    }
  }
  

这些步骤应该能帮你定位并解决问题，先从依赖一致性和命令参数检查开始，这两个是最常见的解决方向。

内容的提问来源于stack exchange，提问作者mvorisek