Angular升级后Karma测试报错：无法加载@angular-devkit/build-angular

架构老林

2026-5-25

解决Angular升级后Karma测试崩溃的问题

刚升级Angular就碰到Karma测试崩了，这种版本迭代带来的配置兼容问题确实头疼。结合你给出的错误日志，我帮你梳理下修复步骤：

先排查依赖安装问题

错误里提示找不到@angular-devkit/build-angular，先把依赖这块捋顺：

删掉node_modules文件夹和package-lock.json（或yarn.lock），彻底清理旧依赖
重新安装全部依赖：
```
npm install
```
如果重新安装后还是报错，手动安装适配当前Angular版本的构建包：
```
npm install @angular-devkit/build-angular --save-dev
```

检查Karma配置文件（`karma.conf.js`）

这是最容易出问题的地方，新版本的Angular对Karma插件的引用方式变了：

确保plugins数组里正确引入了官方插件，替换掉旧的路径引用：

plugins: [
  require('karma-jasmine'),
  require('karma-chrome-launcher'),
  require('karma-jasmine-html-reporter'),
  require('karma-coverage'),
  require('@angular-devkit/build-angular/plugins/karma') // 重点是这行
]

错误日志里提到config.buildWebpack.options报错，说明你可能手动修改过Karma里的Webpack配置。新版本中buildWebpack的结构已经调整，建议尽量使用Angular CLI生成的默认配置，不要随意修改这块的属性路径。

同步`angular.json`的测试配置

有时候升级后项目配置文件的测试构建器路径没更新：

打开angular.json，找到projects -> [你的项目名] -> architect -> test部分，确认builder字段是：
```
"builder": "@angular-devkit/build-angular:karma"
```
而不是旧版本的@angular/cli:karma之类的写法。