Angular项目运行Karma/Jasmine测试时出现__webpack_require__报错

AI 小北

2026-8-28

问题定位

这个报错和karma.conf.js配置没有直接关系，核心原因是依赖版本冲突+潜在的服务循环依赖。你项目没有手动编写webpack配置的前提下，@angular-devkit/build-angular会自动处理Karma测试的webpack打包逻辑，不需要额外调整webpack相关规则。

先看你项目里的显性问题：

依赖重复声明：devDependencies下同时写了两个版本的jasmine-core（3.99.1和_{4.0.0）、两个版本的`@types/jasmine`（3.10.6和}3.10.0），包管理器安装时会出现依赖提升异常，导致_karma_webpack_打包时模块寻址出错，读取服务实例时拿到undefined。
Angular生态包版本不齐：核心Angular包（@angular/core、@angular/common等）都是13.3.11版本，但@angular-devkit/build-angular、@angular/cli停留在13.3.8，小版本差异会导致构建插件内置的webpack模块加载逻辑和核心框架不匹配，打乱模块加载顺序。
报错栈明确指向src/app/@shared/services/YYYYYYYYY.service.ts第30行的XXXXXService引用，版本更新后webpack对循环依赖的校验更严格，之前没暴露的服务循环引用（A服务注入B、B服务反过来注入A）会直接抛undefined错误。

修复步骤

清理重复依赖
打开package.json，删掉devDependencies里重复的依赖条目，统一版本：
- 保留"@types/jasmine": "~3.10.0"，删除上方3.10.6版本的声明
- 保留"jasmine-core": "~4.0.0"，删除上方3.99.1版本的声明
  Angular 13兼容的测试包组合就是3.10.x的jasmine类型定义+4.0.x的jasmine核心包，混装3.x和4.x的jasmine-core一定会出现模块加载异常。
对齐Angular包版本
把@angular-devkit/build-angular、@angular/cli的版本号统一改成13.3.11，和其余@angular开头的核心包版本完全一致，消除小版本差异带来的构建逻辑兼容问题。
清缓存重装依赖
删除项目根目录下的node_modules文件夹，以及对应的包锁文件（package-lock.json/yarn.lock/pnpm-lock.yaml），重新执行依赖安装命令：
```
# 用npm的话执行
npm install
# 用yarn的话执行
yarn install
```
排查循环依赖
如果重装完依赖跑测试还是报同样的错，直接打开报错栈提到的YYYYYYYYY.service.ts第30行，检查XXXXXService和当前服务是否存在互相注入的循环引用：
- 临时修复可以在注入服务时加上@Optional()、@SkipSelf()装饰器，或者通过Injector延迟获取服务实例，避免初始化阶段的引用undefined问题
- 长期修复要把两个服务互相依赖的公共逻辑抽离成第三个独立的公共服务，直接打断循环引用链。
Karma配置微调
你现有的karma.conf.js不需要大改，只需要在client下的jasmine配置项里加一行关闭测试用例随机执行，避免随机执行顺序触发的模块加载时序问题：
```
client: {
  jasmine: {
    random: false
  },
  clearContext: false // 保留浏览器端Jasmine测试结果可见
}
```

注意：不要随便给Karma追加自定义webpack配置，Angular 13的构建插件已经封装了单元测试所需的全部webpack规则，手动追加配置反而会覆盖默认逻辑，引发新的打包错误。

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