Angular 8升级至16时npm安装依赖兼容性错误求助

第一步：清理过时/不兼容的依赖 #

先移除或替换这些明显冲突的依赖：

• @types/angular-material: Angular Material 16自带类型定义，这个旧类型包完全多余，直接删除。
• angular-notifier@14.0.0: 版本过低不兼容Angular16，升级到^16.0.0。
• ng-circle-progress@1.7.1: 该版本不支持Angular16，替换为ng-circle-progress^2.0.0（官方适配Angular12+的版本）。
• ng2-pdf-viewer@9.1.5: 升级到兼容Angular16的^10.0.1或更高版本。
• protractor@5.4.0: Angular16已弃用Protractor，直接删除，后续可改用Cypress或Playwright做E2E测试。
• tslint@5.20.1+codelyzer: Angular12+已弃用TSLint，改用ESLint，直接删除这两个依赖。

第二步：对齐核心Angular依赖版本 #

确保所有@angular/xxx系列依赖版本完全一致，避免混合版本引发冲突：

• 将@angular/animations、@angular/common等核心包，以及@angular/cdk、@angular/material的版本统一为~16.0.5（和@angular/language-service版本对齐），不要混用^16.0.0和^16.0.4。
• rxjs保持~7.8.0、zone.js保持~0.13.0即可，这两个版本和Angular16兼容。

第三步：更新DevDependencies #

• 删除@types/jasminewd2、karma-coverage-istanbul-reporter这些过时依赖。
• 添加ESLint相关依赖（替代TSLint）：

  "@angular-eslint/builder": "~16.0.0",
  "@angular-eslint/eslint-plugin": "~16.0.0",
  "@angular-eslint/eslint-plugin-template": "~16.0.0",
  "@angular-eslint/schematics": "~16.0.0",
  "@angular-eslint/template-parser": "~16.0.0",
  "@typescript-eslint/eslint-plugin": "~5.60.0",
  "@typescript-eslint/parser": "~5.60.0",
  "eslint": "~8.44.0"
  

• @types/node建议降级到~18.17.0，Angular16官方推荐Node版本为18.x，20.x可能存在部分依赖兼容问题。

第四步：安装前的清理操作 #

1. 删除node_modules文件夹：

   rm -rf node_modules # macOS/Linux
   # Windows系统执行
   rmdir /s /q node_modules
   

2. 删除package-lock.json文件：

   rm package-lock.json
   

3. 清理npm缓存：

   npm cache clean --force
   

第五步：执行安装并处理剩余警告 #

运行安装命令：

npm install

如果仍有peer依赖警告，可临时使用npm install --legacy-peer-deps绕过，但长期建议将所有依赖升级到兼容Angular16的版本，避免潜在风险。

修正后的核心依赖片段示例 #

"dependencies": {
  "@angular/animations": "~16.0.5",
  "@angular/cdk": "~16.0.5",
  "@angular/common": "~16.0.5",
  "@angular/compiler": "~16.0.5",
  "@angular/core": "~16.0.5",
  "@angular/forms": "~16.0.5",
  "@angular/material": "~16.0.5",
  "@angular/platform-browser": "~16.0.5",
  "@angular/platform-browser-dynamic": "~16.0.5",
  "@angular/router": "~16.0.5",
  "@types/crypto-js": "^4.1.1",
  "angular-notifier": "^16.0.0",
  "config": "^3.3.9",
  "cookie-session": "^2.0.0",
  "cors": "^2.8.5",
  "express": "^4.18.2",
  "express-fileupload": "^1.4.0",
  "express-http-context": "^1.2.4",
  "lamejs": "^1.2.1",
  "moment": "^2.29.4",
  "moment-timezone": "^0.5.43",
  "ng-circle-progress": "^2.0.0",
  "ng2-pdf-viewer": "^10.0.1",
  "notiflix": "^3.2.6",
  "rxjs": "~7.8.0",
  "tslib": "^2.3.0",
  "winston": "^3.9.0",
  "winston-daily-rotate-file": "^4.7.1",
  "zone.js": "~0.13.0"
},
"devDependencies": {
  "@angular-devkit/build-angular": "~16.0.5",
  "@angular/cli": "~16.0.5",
  "@angular/compiler-cli": "~16.0.5",
  "@angular/language-service": "~16.0.5",
  "@angular-eslint/builder": "~16.0.0",
  "@angular-eslint/eslint-plugin": "~16.0.0",
  "@angular-eslint/eslint-plugin-template": "~16.0.0",
  "@angular-eslint/schematics": "~16.0.0",
  "@angular-eslint/template-parser": "~16.0.0",
  "@types/jasmine": "~4.3.0",
  "@types/node": "~18.17.0",
  "@typescript-eslint/eslint-plugin": "~5.60.0",
  "@typescript-eslint/parser": "~5.60.0",
  "eslint": "~8.44.0",
  "jasmine-core": "~4.6.0",
  "jasmine-spec-reporter": "~7.0.0",
  "karma": "~6.4.0",
  "karma-chrome-launcher": "~3.2.0",
  "karma-coverage": "~2.2.0",
  "karma-jasmine": "~5.1.0",
  "karma-jasmine-html-reporter": "~2.0.0",
  "ts-node": "~10.9.1",
  "typescript": "~5.0.2"
}

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