将Angular 8项目升级至Angular 15时遭遇依赖冲突问题

问题场景 #

需将Angular 8.3.26项目逐步升级到12+版本，先尝试升级至Angular 9时遭遇多轮依赖冲突：执行官方升级命令触发peer依赖错误，手动修改package.json版本后又出现依赖树解析失败，删除node_modules和package-lock.json后问题依旧，无法接受重建项目的耗时方案。

执行升级命令时的错误 #

执行命令：
G_DISABLE_VERSION_CHECK=1 npx @angular/cli@8 update @angular/core@8 @angular/cli@8 --allow-dirty
出现以下peer依赖错误：

Package "angular-notifier" has an incompatible peer dependency to "@angular/common" (requires ">= 6.0.0 < 7.0.0" (extended), would install "8.2.14").
Package "angular-notifier" has an incompatible peer dependency to "@angular/core" (requires ">= 6.0.0 < 7.0.0" (extended), would install "8.2.14").
Package "ng2-ckeditor" has an incompatible peer dependency to "@angular/forms" (requires "^9.0.2" (extended), would install "8.2.14").
Package "angular-bootstrap-datetimepicker" has an incompatible peer dependency to "zone.js" (requires "^0.8.26", would install "0.9.1").
✖ Migration failed: Incompatible peer dependencies found.
Peer dependency warnings when installing dependencies means that those dependencies might not work correctly together.
You can use the '--force' option to ignore incompatible peer dependencies and instead address these warnings later.
  See "/tmp/ng-ROUCuS/angular-errors.log" for further details.

当前环境信息 #

Angular CLI: 8.3.26
Node: 18.13.0
OS: linux x64
Angular: 8.0.0

已安装核心包版本 #

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.26
@angular-devkit/build-angular     0.803.26
@angular/animations               8.2.14
@angular/cdk                      14.0.0-next.2
@angular/material                 14.0.0-next.2
rxjs                              6.5.5
typescript                        3.4.5

修改package.json后的错误 #

调整包版本为提示的"would install"版本后执行npm install，触发：

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: ey-csirt@4.0.0
npm ERR! Found: @angular/common@8.2.14
npm ERR! node_modules/@angular/common
npm ERR!   @angular/common@"8.2.14" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^15.0.0-0 || ^15.1.0-0 || ^15.2.0-0 || ^15.3.0-0 || ^16.0.0-0" from @angular/cdk@15.2.0-next.0
npm ERR! node_modules/@angular/cdk
npm ERR!   @angular/cdk@"github:angular/cdk-builds" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

分步解决方案 #

1. 对齐第三方依赖与Angular 8版本 #

• angular-notifier：当前版本仅支持Angular 6-7，升级至兼容Angular 8的版本（如^5.0.0），执行：
  npm install angular-notifier@5
• ng2-ckeditor：当前要求Angular 9+，降级至支持Angular 8的版本（如^1.3.0），执行：
  npm install ng2-ckeditor@1.3.0
• angular-bootstrap-datetimepicker：要求zone.js@^0.8.26，降级zone.js版本：
  npm install zone.js@0.8.29
• @angular/cdk & @angular/material：当前版本14.x严重超前，降级至Angular 8兼容的8.x版本（如^8.2.3），执行：
  npm install @angular/cdk@8.2.3 @angular/material@8.2.3

2. 调整Node版本（可选但关键） #

Node 18与Angular 8/9的npm依赖解析逻辑存在兼容问题，用nvm临时切换至Node 14：
nvm install 14 && nvm use 14

3. 重新执行升级命令 #

处理完依赖后，带--force参数跳过剩余警告，直接升级至Angular 9：
G_DISABLE_VERSION_CHECK=1 npx @angular/cli@8 update @angular/core@9 @angular/cli@9 --allow-dirty --force

4. 验证与修复 #

• 执行ng build和ng serve检查编译与运行状态
• 针对Angular 9的破坏性变更（如Ivy引擎过渡、HttpModule替换为HttpClientModule）调整代码
• 逐一验证第三方依赖的功能，适配版本变更后的API差异

内容的提问来源于stack exchange，提问作者Mohamed-Rmili