执行ng test遇Module build失败错误，请求排查原因

问题现象 #

运行ng test后，Karma Server启动但未执行任何测试，控制台抛出以下错误：

ng-virtual-main.js!=!data:text/javascript;base64,CiAgaW1wb3J0IHsgZ2V0VGVzdEJlZCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUvdGVzdGluZyc7CiAgaW1wb3J0IHsKICAgIEJyb3dzZXJEeW5hbWljVGVzdGluZ01vZHVsZSwKICAgIHBsYXRmb3JtQnJvd3NlckR5bmFtaWNUZXN0aW5nLAogICB9IGZyb20gJ0Bhbmd1bGFyL3BsYXRmb3JtLWJyb3dzZXItZHluYW1pYy90ZXN0aW5nJzsKCiAgLy8gSW5pdGlhbGl6ZSB0aGUgQW5ndWxhciB0ZXN0aW5nIGVudmlyb25tZW50LgogIGdldFRlc3RCZWQoKS5pbml0VGVzdEVudmlyb25tZW50KEJyb3dzZXJEeW5hbWljVGVzdGluZ01vZHVsZSwgcGxhdGZvcm1Ccm93c2VyRHluYW1pY1Rlc3RpbmcoKSwgewogICAgZXJyb3JPblVua25vd25FbGVtZW50czogdHJ1ZSwKICAgIGVycm9yT25Vbmtub3duUHJvcGVydGllczogdHJ1ZQogIH0pOwo=

• Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
  Error: data:text/javascript;base64,CiAgaW1wb3J0IHsgZ2V0VGVzdEJlZCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUvdGVzdGluZyc7CiAgaW1wb3J0IHsKICAgIEJyb3dzZXJEeW5hbWljVGVzdGluZ01vZHVsZSwKICAgIHBsYXRmb3JtQnJvd3NlckR5bmFtaWNUZXN0aW5nLAogICB9IGZyb20gJ0Bhbmd1bGFyL3BsYXRmb3JtLWJyb3dzZXItZHluYW1pYy90ZXN0aW5nJzsKCiAgLy8gSW5pdGlhbGl6ZSB0aGUgQW5ndWxhciB0ZXN0aW5nIGVudmlyb25tZW50LgogIGdldFRlc3RCZWQoKS5pbml0VGVzdEVudmlyb25tZW50KEJyb3dzZXJEeW5hbWljVGVzdGluZ01vZHVsZSwgcGxhdGZvcm1Ccm93c2VyRHluYW1pY1Rlc3RpbmcoKSwgewogICAgZXJyb3JPblVua25vd25FbGVtZW50czogdHJ1ZSwKICAgIGVycm9yT25Vbmtub3duUHJvcGVydGllczogdHJ1ZQogIH0pOwo=
  is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.

项目依赖信息：

"dependencies": {
    "@angular/animations": "^16.2.5",
    "@angular/cdk": "^16.2.5",
    "@angular/common": "^16.2.5",
    "@angular/compiler": "^16.2.5",
    "@angular/core": "^16.2.5",
    "@angular/forms": "^16.2.5",
    "@angular/material": "^16.2.5",
    "@angular/platform-browser": "^16.2.5",
    "@angular/platform-browser-dynamic": "^16.2.5",
    "@angular/router": "^16.2.5"
    ...
}

"devDependencies": {
    "@angular-devkit/build-angular": "^16.2.2",
    "jasmine-core": "~4.5.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    ...
    "typescript": "~4.9.3",
}

问题原因及解决方案 #

原因分析 #

错误中的base64编码内容是Angular测试框架自动生成的环境初始化脚本，报错本质是TypeScript编译器无法识别该动态生成的脚本，导致编译失败。常见诱因包括：

• tsconfig.spec.json或主tsconfig.json的include/files配置未覆盖测试相关路径
• Angular CLI与核心依赖版本存在微小差异
• 缓存异常导致编译上下文错乱

解决方案 #

1. 修正tsconfig.spec.json配置
   确保配置包含测试入口文件和所有测试相关代码：

   {
     "extends": "./tsconfig.json",
     "compilerOptions": {
       "outDir": "./out-tsc/spec",
       "types": ["jasmine"]
     },
     "include": [
       "src/**/*.spec.ts",
       "src/**/*.d.ts",
       "src/test.ts"
     ]
   }
   

   主tsconfig.json的include需至少包含"src/**/*"，确保所有源码和测试文件被覆盖。

2. 清理缓存并重建依赖
   执行以下命令清除缓存并重新安装依赖：

   ng cache clean
   rm -rf node_modules .angular/cache package-lock.json
   npm install
   ng test --no-cache
   

3. 对齐Angular CLI版本
   当前@angular-devkit/build-angular版本（16.2.2）略低于Angular核心版本（16.2.5），建议升级到同版本：

   npm install @angular-devkit/build-angular@16.2.5 --save-dev
   

4. 检查测试入口文件
   确保src/test.ts存在且内容正确，若缺失则重新创建：

   import { getTestBed } from '@angular/core/testing';
   import {
     BrowserDynamicTestingModule,
     platformBrowserDynamicTesting,
   } from '@angular/platform-browser-dynamic/testing';
   
   getTestBed().initTestEnvironment(
     BrowserDynamicTestingModule,
     platformBrowserDynamicTesting(),
     { errorOnUnknownElements: true, errorOnUnknownProperties: true }
   );
   

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