运行Karma Jasmine带代码覆盖率测试时出现404错误

1. 检查Angular CLI与Karma版本兼容性 #

版本不匹配是这类问题的常见诱因，先执行命令确认当前版本：

ng version
npm list karma karma-webpack

根据你的Angular版本调整依赖：

• Angular 16+建议搭配karma ~6.4.0、karma-webpack ~5.0.0
• 执行对应版本的安装命令：npm install karma@匹配版本 karma-webpack@匹配版本 --save-dev

2. 修正karma.conf.js核心配置 #

手动修改files属性反而容易和Angular CLI的自动注入冲突，确保以下配置正确：

• files与preprocessors：

files: [
  { pattern: './src/test.ts', watched: false }
],
preprocessors: {
  './src/test.ts': ['webpack', 'sourcemap']
},

• webpack配置引入：直接使用Angular官方的测试webpack配置，避免自定义冲突：

const webpackConfig = require('./node_modules/@angular-devkit/build-angular/src/webpack/configs/test.js');
// ...
webpack: webpackConfig,

3. 清理缓存与重建依赖 #

缓存损坏会导致资源加载异常，执行以下操作：

# 删除依赖与锁文件
rm -rf node_modules package-lock.json yarn.lock
# 重新安装依赖
npm install
# 清理Angular缓存
ng cache clean --all

4. 优化ChromeHeadless启动参数 #

在karma.conf.js的customLaunchers中添加必要参数，避免无头浏览器启动异常：

customLaunchers: {
  ChromeHeadless: {
    base: 'Chrome',
    flags: [
      '--headless=new',
      '--disable-gpu',
      '--no-sandbox',
      '--disable-dev-shm-usage'
    ]
  }
},

5. 验证test.ts入口文件 #

确保src/test.ts为Angular默认的测试入口，未被错误修改：

import 'zone.js/testing';
import { getTestBed } from '@angular/core/testing';
import {
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';

declare const require: {
  context(path: string, deep?: boolean, filter?: RegExp): {
    keys(): string[];
    <T>(id: string): T;
  };
};

getTestBed().initTestEnvironment(
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting(),
);

const context = require.context('./', true, /\.spec\.ts$/);
context.keys().map(context);

如果以上步骤无效，检查webpack编译阶段的报错信息——可能是项目代码存在语法错误，导致无法生成main.js。

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