运行Angular项目执行npm install时遭遇peer依赖缺失警告求助

问题根源 #

你的项目存在版本严重不兼容：

• @angular/core 使用14.0.6，但其他Angular核心依赖（animations、common、forms等）均为9.1.13，导致peer依赖要求的@angular/core@9.1.13未满足
• Angular CLI版本14.0.6与项目依赖的Angular 9.x不匹配，引发build-angular、ngtools/webpack的peer依赖警告
• 第三方依赖（如bootstrap、eslint-config-prettier等）也存在peer依赖未安装的情况

方案一：统一Angular版本到9.x（适合保留原有项目版本） #

1. 降级Angular CLI到9.x #

npm uninstall -g @angular/cli
npm install -g @angular/cli@9.1.13

2. 统一项目内Angular核心依赖版本 #

修改package.json中的Angular依赖，将所有@angular/*包的版本统一为^9.1.13，包括@angular/core：

"dependencies": {
  "@angular/animations": "^9.1.13",
  "@angular/common": "^9.1.13",
  "@angular/compiler": "^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/service-worker": "^9.1.13",
  // 其他依赖保持不变
}

3. 安装缺失的peer依赖 #

# 安装Angular 9.x所需的compiler-cli
npm install --save-dev @angular/compiler-cli@9.1.13
# 安装匹配的typescript（Angular 9.x对应typescript 3.8.x）
npm install --save-dev typescript@3.8.3
# 安装bootstrap 5.x所需的@popperjs/core
npm install --save @popperjs/core@^2.10.2
# 安装eslint以满足eslint-config-prettier的依赖
npm install --save-dev eslint@7.32.0
# 安装acorn@^8以满足acorn-import-assertions的依赖
npm install --save-dev acorn@8.10.0

4. 重新安装依赖 #

rm -rf node_modules package-lock.json
npm install

方案二：升级项目到Angular 14.x（推荐，获得新特性和安全更新） #

1. 升级Angular核心依赖到14.x #

修改package.json中的所有@angular/*包版本为^14.0.6，同时更新第三方依赖到兼容Angular 14的版本：

"dependencies": {
  "@angular/animations": "^14.0.6",
  "@angular/common": "^14.0.6",
  "@angular/compiler": "^14.0.6",
  "@angular/core": "^14.0.6",
  "@angular/forms": "^14.0.6",
  "@angular/platform-browser": "^14.0.6",
  "@angular/platform-browser-dynamic": "^14.0.6",
  "@angular/router": "^14.0.6",
  "@angular/service-worker": "^14.0.6",
  "@ng-idle/core": "^12.0.0",
  "@ngrx/effects": "^14.0.0",
  "@ngrx/store": "^14.0.0",
  "@ngrx/store-devtools": "^14.0.0",
  "angular-mydatepicker": "^0.6.0",
  "ngx-bootstrap": "^10.0.0",
  "ngx-editor": "^14.0.0",
  "rxjs": "^7.5.0",
  "zone.js": "~0.11.4"
}

2. 安装匹配的开发依赖 #

npm install --save-dev @angular/compiler-cli@14.0.6
npm install --save-dev typescript@4.7.4

3. 解决其他第三方依赖的peer问题 #

npm install --save @popperjs/core@^2.10.2
npm install --save-dev eslint@7.32.0 acorn@8.10.0

4. 执行Angular升级命令（自动处理兼容性） #

ng update @angular/core@14 @angular/cli@14 --force

5. 重新安装依赖 #

rm -rf node_modules package-lock.json
npm install

额外注意事项 #

• 升级后需检查项目代码是否存在Angular版本变更导致的语法或API兼容问题（如RxJS 7.x的变化、Angular 14的新特性）
• 若angular-mydatepicker不支持Angular 14，可替换为ngx-datepicker等维护活跃的组件库
• npm fund为可选命令，用于支持开源包作者，不影响项目运行

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