将Angular Compiler从8升级到9时遭遇不兼容对等依赖问题

问题概述 #

• 执行ng update @angular/compiler@9无报错，但后续升级流程失败
• 系统提示已安装的Angular CLI版本过时，临时安装9.1.15版本CLI后，检测到@angular/compiler-cli（当前15.2.4版本）与拟安装的@angular/compiler（9.1.13版本）存在对等依赖不兼容，导致迁移终止
• 项目中仅@angular/compiler（8.2.14）和@angular/language-service（8.2.14）未升级至15.2.4，使用--force参数仍无法完成升级

当前项目依赖配置 #

{
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^15.2.4",
    "@angular/common": "^15.2.4",
    "@angular/compiler": "~9.1.13",
    "@angular/core": "^15.2.4",
    "@angular/forms": "^15.2.4",
    "@angular/platform-browser": "^15.2.4",
    "@angular/platform-browser-dynamic": "^15.2.4",
    "@angular/router": "^15.2.4",
    "bulma": "^0.7.4",
    "core-js": "^2.5.4",
    "rxjs": "~6.3.3",
    "tslib": "^1.14.1",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.2.4",
    "@angular/cli": "^15.2.4",
    "@angular/compiler-cli": "^15.2.4",
    "@angular/language-service": "~9.1.13",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^0.0.28",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^6.4.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~5.0.2"
  }
}

当前Angular版本信息 #

Angular CLI: 15.2.4
Node: 18.14.2
Package Manager: npm 9.6.2
OS: win32 x64

Angular: 15.2.4
... animations, cli, common, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1502.4
@angular-devkit/build-angular   15.2.4
@angular-devkit/core            15.2.4
@angular-devkit/schematics      15.2.4
@angular/compiler               8.2.14
@angular/language-service       8.2.14
@schematics/angular             15.2.4
rxjs                            6.3.3
typescript                      5.0.2

解决方案 #

1. 统一Angular核心依赖版本 #

项目混合了8、9、15三个大版本的Angular依赖，这是冲突根源。先将所有Angular依赖统一到9.x版本基线：

• 卸载当前高版本Angular依赖：

  npm uninstall @angular/cli @angular/compiler-cli @angular-devkit/build-angular @angular/animations @angular/common @angular/core @angular/forms @angular/platform-browser @angular/platform-browser-dynamic @angular/router
  

• 安装Angular 9.x完整依赖集：

  npm install @angular/cli@9.1.15 @angular/compiler@9.1.13 @angular/compiler-cli@9.1.13 @angular/language-service@9.1.13 @angular/animations@9.1.13 @angular/common@9.1.13 @angular/core@9.1.13 @angular/forms@9.1.13 @angular/platform-browser@9.1.13 @angular/platform-browser-dynamic@9.1.13 @angular/router@9.1.13 @angular-devkit/build-angular@0.901.15
  

2. 调整配套依赖版本 #

Angular 9对配套依赖有版本要求，需同步调整：

• 降级TypeScript至兼容版本~3.8.3：

  npm install typescript@~3.8.3
  

• 更新RxJS至Angular 9兼容版本~6.5.5：

  npm install rxjs@~6.5.5
  

• 更新Zone.js至~0.10.2：

  npm install zone.js@~0.10.2
  

3. 执行升级迁移 #

依赖统一后，重新执行Angular 9的迁移命令：

ng update @angular/core@9 @angular/cli@9 --migrate-only

4. 后续升级到15.x（可选） #

若最终需要升级到15.x版本，需遵循逐版本升级原则（9→10→11→12→13→14→15），每次仅跨一个大版本，避免依赖冲突：

ng update @angular/core@10 @angular/cli@10
# 依次完成后续版本升级，每个版本升级后验证项目可正常运行

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