升级到Angular 12后运行报错NGCC failed如何解决

安全阿岳

2026-9-27

解决步骤

1. 清理不兼容的废弃依赖

卸载已经废弃的@angular/http包，Angular 4+ 已全面改用@angular/common/http作为HTTP请求模块，7.x版本的@angular/http完全不兼容Angular 12：
```
npm uninstall @angular/http
```
同步替换项目中所有导入@angular/http的代码为@angular/common/http对应API。
卸载冗余的构建依赖，Angular 12的@angular-devkit/build-angular已内置webpack和压缩工具，无需单独声明，避免版本冲突：
```
npm uninstall webpack uglifyjs-webpack-plugin
```

2. 升级第三方依赖到适配Angular 12的版本

你当前依赖中多数第三方包还停留在Angular 8对应的版本，不支持Ivy编译，需升级到匹配版本：

依赖包名	现有版本	目标版本
`@auth0/angular-jwt`	^3.0.1	^4.2.0
`@ngx-translate/core`	^11.0.1	^13.0.0
`@ngx-translate/http-loader`	^4.0.0	^6.0.0
`@schematics/angular`	^8.3.29	12.2.12
`ag-grid-angular`	^22.1.1	^26.0.0
`ag-grid-community`	^22.1.1	^26.0.0
`ngx-color-picker`	^8.2.0	^11.0.0
`ngx-toastr`	^11.3.3	^14.0.0
`@covalent/core`	2.1.1	^3.4.0

ng2-dnd已停止维护，完全不支持Angular 12，建议替换为@angular/cdk/drag-drop实现拖拽功能，若必须保留需寻找适配Angular 12的社区fork版本。

3. 清理缓存并重装依赖

# 清理npm缓存
npm cache clean --force
# 删除现有依赖和 lock 文件
# Windows 环境执行：rd /s /q node_modules & del package-lock.json
rm -rf node_modules package-lock.json
# 重装依赖
npm install

4. 手动执行NGCC预编译

npx ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points

5. 调整tsconfig配置

在tsconfig.json中新增angularCompilerOptions配置，跳过不兼容的依赖检查：

{
  "compileOnSave": false,
  "compilerOptions": {
    // 保留原有的配置不变
  },
  "angularCompilerOptions": {
    "enableIvy": true,
    "skipLibCheck": true,
    "allowEmptyCodegenFiles": true,
    "ngccSkipLibs": ["ng2-dnd"] // 暂时无法升级的老旧依赖可添加到此处跳过处理
  }
}