回滚Angular 13升级至14后，npm update出现peer dependency冲突求助

问题背景 #

尝试将Angular 13升级到Angular 14失败并回滚后，执行npm update出现peer dependency冲突：当前Angular版本为13.4.0，但@angular/cdk@13.3.9解析时要求依赖@angular/common@14.3.0，且当前Node版本20.12.2不被Angular 13支持，需在不使用--force参数的前提下修复依赖问题。

当前环境与Angular版本信息 #

Angular CLI: 13.3.11
Node: 20.12.2 (Unsupported)
Package Manager: npm 10.8.2
OS: win32 x64

Angular: 13.4.0
... animations, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.1303.11
@angular-devkit/build-angular      13.3.11
@angular-devkit/core               13.3.11
@angular-devkit/schematics         13.3.11
@angular/cdk                       13.3.9
@angular/cli                       13.3.11
@angular/material                  13.3.9
@angular/material-moment-adapter   13.3.9
@schematics/angular                13.3.11
rxjs                               7.8.1
typescript                         4.6.4

Warning: The current version of Node (20.12.2) is not supported by Angular.

package.json配置 #

{  
  "name": "app",  
  "title": "ABX",  
  "company": "SkyWare Labs Inc.",  
  "version": "2.3.1",  
  "scripts": {    
    "ng": "ng",    
    "clean": "rimraf ./dist",    
    "start": "ng serve --port 4200",    
    "build": "ng build",    
    "build:prod": "ng build --configuration production",    
    "test": "ng test --watch=false --browsers=ChromeHeadlessCustom",    
    "test:watch": "ng test",    
    "lint": "ng lint",    
    "e2e": "ng e2e",    
    "postinstall": "ngcc"  
  },  
  "private": true,  
  "dependencies": {    
    "@angular/animations": "~13.4.0",    
    "@angular/cdk": "^13.3.9",    
    "@angular/compiler": "~13.4.0",    
    "@angular/core": "^13.4.0",    
    "@angular/forms": "~13.4.0",    
    "@angular/material": "^13.3.9",    
    "@angular/material-moment-adapter": "~13.3.9",    
    "@angular/platform-browser": "~13.4.0",    
    "@angular/platform-browser-dynamic": "~13.4.0",    
    "@angular/router": "~13.4.0",    
    "@angular/service-worker": "~13.4.0",    
    "@ant-design/colors": "^7.0.2",    
    "@sentry/angular": "^6.19.7",    
    "@sentry/tracing": "^6.19.7",    
    "@types/leaflet": "^1.9.8",    
    "@types/mixpanel-browser": "^2.35.6",    
    "angulartics2": "^12.1.0",    
    "chart.js": "^2.9.4",    
    "cors": "^2.8.5",    
    "jspdf": "^2.5.1",    
    "jspdf-autotable": "^3.5.25",    
    "leaflet": "^1.7.1",    
    "leaflet-easybutton": "^2.4.0",    
    "mixpanel-browser": "^2.41.0",    
    "moment": "^2.29.1",    
    "ng2-charts": "^2.4.2",    
    "ngx-mat-select-search": "^4.1.1",    
    "ngx-material-file-input": "^3.0.0",    
    "ngx-webstorage-service": "^5.0.0",    
    "nvm": "^0.0.4",    
    "rxjs": "^7.4.0",    
    "tslib": "^2.2.0",    
    "uuid": "^8.3.2",    
    "xlsx": "^0.17.0",    
    "zone.js": "~0.11.4"  
  },  
  "devDependencies": {    
    "@angular-devkit/build-angular": "^13.3.11",    
    "@angular/cli": "^13.3.11",    
    "@angular/compiler-cli": "~13.4.0",    
    "@angular/language-service": "~13.4.0",    
    "@types/jasmine": "^4.0.3",    
    "@types/jasminewd2": "^2.0.9",    
    "@types/node": "^12.20.15",    
    "codelyzer": "^6.0.2",    
    "jasmine-core": "~4.1.1",    
    "jasmine-spec-reporter": "~7.0.0",    
    "karma": "~6.3.20",    
    "karma-chrome-launcher": "~3.1.1",    
    "karma-coverage-istanbul-reporter": "~3.0.3",    
    "karma-jasmine": "~5.0.1",    
    "karma-jasmine-html-reporter": "^1.7.0",    
    "protractor": "~7.0.0",    
    "puppeteer": "^2.1.1",    
    "ts-node": "10.7.0",    
    "tslint": "~6.1.0",    
    "typescript": "^4.6.3"  
  },  
  "overrides": {    
    "ng2-charts": {      
      "rxjs": "^7.4.0"    
    }  
  }
}

报错信息 #

npm update
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: app@2.3.1
npm error Found: @angular/core@13.4.0
npm error node_modules/@angular/core
npm error   @angular/core@"^13.4.0" from the root project
npm error   peer @angular/core@"^13.0.0 || ^14.0.0-0" from @angular/cdk@13.3.9
npm error   node_modules/@angular/cdk
npm error     @angular/cdk@"^13.3.9" from the root project
npm error
npm error Could not resolve dependency:
npm error peer @angular/core@"14.3.0" from @angular/common@14.3.0
npm error node_modules/@angular/common
npm error   peer @angular/common@"^13.0.0 || ^14.0.0-0" from @angular/cdk@13.3.9
npm error   node_modules/@angular/cdk
npm error     @angular/cdk@"^13.3.9" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error

解决方案 #

1. 锁定Angular CDK/Material的精确版本 #

将package.json中@angular/cdk、@angular/material、@angular/material-moment-adapter的版本从带^的范围版本改为精确版本，避免npm解析时拉取更高版本的依赖：

"@angular/cdk": "13.3.9",
"@angular/material": "13.3.9",
"@angular/material-moment-adapter": "13.3.9"

2. 添加依赖覆盖强制指定核心包版本 #

在package.json的overrides字段中添加对@angular/common和@angular/core的版本锁定，确保它们与Angular 13.4.0完全匹配：

"overrides": {
  "ng2-charts": {
    "rxjs": "^7.4.0"
  },
  "@angular/common": "13.4.0",
  "@angular/core": "13.4.0"
}

3. 清理缓存并重新安装依赖 #

执行以下命令彻底清理现有依赖和缓存，避免残留的冲突文件：

# 删除node_modules文件夹
rm -rf node_modules
# 删除package-lock.json文件
rm package-lock.json
# 清理npm缓存
npm cache clean --force
# 重新安装依赖
npm install

4. 切换到Angular 13兼容的Node版本 #

Angular 13官方支持的Node版本为12.20.x、14.15.x、16.10.x，使用nvm切换到兼容版本：

# 安装Node 16.20.2（Angular 13推荐的LTS版本）
nvm install 16.20.2
# 切换到该版本
nvm use 16.20.2

5. 安全执行npm update #

完成上述步骤后，执行npm update即可更新兼容的依赖版本，不会出现冲突：

npm update

内容的提问来源于stack exchange，提问作者Werner Reiche