Angular项目执行npm run build时提示找不到@angular/compiler-cli/ngcc模块

刚换笔记本重装了Node.js和Angular，当前环境是Angular CLI 9.0.1、Node 12.15.0（win32 x64），跑项目的npm run build时直接踩坑了，报找不到@angular/compiler-cli/ngcc模块，完整的报错信息和项目配置如下：

项目package.json配置 #

{ 
"name": "webprimeng", 
"version": "0.0.0", 
"scripts": { 
"ng": "ng", 
"start": "ng serve", 
"build": "ng build --prod --output-path ../src/main/resources/static --base-href /transaction/ --deploy-url /transaction/", 
"watch": "ng build --prod --output-path ../src/main/resources/static --base-href /transaction/ --deploy-url /transaction/ --watch", 
"test": "ng test", 
"lint": "ng lint", 
"e2e": "ng e2e" 
}, 
"private": true, 
"dependencies": { 
"@angular/animations": "~7.0.0", 
"@angular/common": "~7.0.0", 
"@angular/compiler": "~7.0.0", 
"@angular/core": "~7.0.0", 
"@angular/forms": "~7.0.0", 
"@angular/http": "~7.0.0", 
"@angular/platform-browser": "~7.0.0", 
"@angular/platform-browser-dynamic": "~7.0.0", 
"@angular/router": "~7.0.0", 
"@ng-bootstrap/ng-bootstrap": "^3.3.1", 
"@ngx-pwa/local-storage": "^7.4.2", 
"angular-font-awesome": "^3.1.2", 
"angular-web-storage": "^4.1.0", 
"bootstrap": "^4.3.1", 
"core-js": "^2.6.10", 
"ng2-cookies": "^1.0.12", 
"primeflex": "^1.0.0", 
"primeicons": "^1.0.0", 
"primeng": "^6.1.7", 
"rxjs": "^6.5.3", 
"rxjs-compat": "^6.5.3", 
"zone.js": "^0.8.29" 
}, 
"devDependencies": { 
"@angular-devkit/build-angular": "^0.900.1", 
"@angular/cli": "^9.0.1", 
"@angular/compiler-cli": "^9.0.0", 
"@angular/language-service": "~7.0.0", 
"@types/jasmine": "^2.8.16", 
"@types/jasminewd2": "^2.0.8", 
"@types/node": "~8.9.4", 
"codelyzer": "~4.5.0", 
"jasmine-core": "~2.99.1", 
"jasmine-spec-reporter": "~4.2.1", 
"karma": "~3.0.0", 
"karma-chrome-launcher": "~2.2.0", 
"karma-coverage-istanbul-reporter": "^2.0.6", 
"karma-jasmine": "~1.1.2", 
"karma-jasmine-html-reporter": "^0.2.2", 
"protractor": "^5.4.2", 
"ts-node": "~7.0.0", 
"tslint": "~5.11.0", 
"typescript": "~3.1.6" 
} 
}

完整错误信息 #

An unhandled exception occurred: Cannot find module '@angular/compiler-cli/ngcc'
Require stack:
- D:\workspace\webprimeng\primeng\node_modules\@ngtools\webpack\src\ngcc_processor.js
- D:\workspace\webprimeng\primeng\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js
- D:\workspace\webprimeng\primeng\node_modules\@ngtools\webpack\src\index.js
- D:\workspace\webprimeng\primeng\node_modules\@angular-devkit\build-angular\src\angular-cli-files\models\webpack-configs\typescript.js
- D:\workspace\webprimeng\primeng\node_modules\@angular-devkit\build-angular\src\angular-cli-files\models\webpack-configs\index.js
- D:\workspace\webprimeng\primeng\node_modules\@angular-devkit\build-angular\src\browser\index.js
- D:\workspace\webprimeng\primeng\node_modules\@angular-devkit\architect\node\node-modules-architect-host.js
- D:\workspace\webprimeng\primeng\node_modules\@angular-devkit\architect\node\index.js
- D:\workspace\webprimeng\primeng\node_modules\@angular\cli\models\architect-command.js
- D:\workspace\webprimeng\primeng\node_modules\@angular\cli\commands\build-impl.js
- D:\workspace\webprimeng\primeng\node_modules\@angular-devkit\schematics\tools\export-ref.js
- D:\workspace\webprimeng\primeng\node_modules\@angular-devkit\schematics\tools\index.js
- D:\workspace\webprimeng\primeng\node_modules\@angular\cli\utilities\json-schema.js
- D:\workspace\webprimeng\primeng\node_modules\@angular\cli\models\command-runner.js
- D:\workspace\webprimeng\primeng\node_modules\@angular\cli\lib\cli\index.js
- D:\workspace\webprimeng\primeng\node_modules\@angular\cli\lib\init.js
- D:\workspace\webprimeng\primeng\node_modules\@angular\cli\bin\ng
See "C:\Users\yyy~1\AppData\Local\Temp\ng-hLuf5T\angular-errors.log" for further details.
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file C:\Windows\system32\cmd.exe
npm ERR! errno ENOENT
npm ERR! webprimeng@0.0.0 build: `ng build --prod --output-path ../src/main/resources/static --base-href /transaction/ --deploy-url /transaction/`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the webprimeng@0.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\yyyy\AppData\Roaming\npm-cache\_logs\2020-02-09T14_34_11_713Z-debug.log

问题原因分析 #

一眼就能看出问题所在：你的项目主依赖是Angular 7.x（dependencies里所有@angular/*都是~7.0.0），但开发依赖里却用了Angular 9.x的@angular/compiler-cli（^9.0.0）和@angular-devkit/build-angular（^0.900.1），版本完全不匹配！

ngcc是Angular 9才引入的兼容性编译工具，Angular 7的@angular/compiler-cli里根本没有这个模块，所以构建时Webpack找不到它就报错了。

解决方案步骤 #

1. 统一Angular版本到7.x #

修改package.json里的devDependencies部分，把Angular相关的开发依赖降到和项目主版本一致：

"@angular-devkit/build-angular": "~0.7.0",
"@angular/cli": "~7.0.0",
"@angular/compiler-cli": "~7.0.0",

提示：Angular CLI版本必须和项目的Angular主版本对应，7.x的项目就用7.x的CLI，9.x的项目用9.x的CLI，跨版本混用必出问题。

2. 清理旧依赖并重新安装 #

• 删除项目根目录的node_modules文件夹
• 删除package-lock.json文件（如果用Yarn的话就删yarn.lock）
• 执行命令重新安装依赖：

  npm install
  

3. 验证版本一致性 #

安装完成后，执行以下命令确认CLI和项目依赖版本匹配：

ng version

输出里的Angular CLI和@angular/core等核心包版本应该都是7.x系列。

额外建议 #

如果你确实想把项目升级到Angular 9，别直接改依赖版本，一定要按照Angular官方的升级指南逐步操作，同时还要检查PrimeNG、@ng-bootstrap/ng-bootstrap这些第三方库是否支持Angular 9，避免出现更多兼容性问题。

内容的提问来源于stack exchange，提问作者A. perera