Angular 18项目安装Angular Material时出现依赖冲突错误

问题场景 #

使用 Node.js v20.13.1 + Angular v18.0.1 创建新项目，导入 CodedThemes 免费模板后，执行 ng add @angular/material 时触发两次 ERESOLVE 依赖解析错误：

错误1：@ng-bootstrap/ng-bootstrap 与 Angular 18 冲突 #

ℹ 使用包管理器: npm
✔ 找到兼容包版本: @angular/material@17.3.10.
✔ 已加载包信息。

即将安装并执行包 @angular/material@17.3.10。
是否继续？Yes
npm ERR! 代码 ERESOLVE
npm ERR! ERESOLVE 无法解析依赖

npm ERR! 解析依赖时出错: @ng-bootstrap/ng-bootstrap@16.0.0
npm ERR! 已找到: @angular/common@18.0.0
npm ERR! node_modules/@angular/common
npm ERR!   来自 @angular/cdk@17.3.10 的 peer 依赖要求 @angular/common@"^17.0.0 || ^18.0.0"
npm ERR!   node_modules/@angular/cdk
npm ERR!     来自 ngx-scrollbar@13.0.3 的 peer 依赖要求 @angular/cdk@">=16.0.0"
npm ERR!     node_modules/ngx-scrollbar
npm ERR!       根项目依赖 ngx-scrollbar@"^13.0.3"
npm ERR!     根项目依赖 @angular/cdk@"^17.3.6"
npm ERR!     还有 1 个依赖来源 (@angular/material)
npm ERR!   来自 @angular/forms@18.0.0 的 peer 依赖要求 @angular/common@"18.0.0"
npm ERR!   node_modules/@angular/forms
npm ERR!     根项目依赖 @angular/forms@"^18.0.0-next.3"
npm ERR!     来自 @angular/material@17.3.10 的 peer 依赖要求 @angular/forms@"^17.0.0 || ^18.0.0"
npm ERR!     node_modules/@angular/material
npm ERR!       根项目依赖 @angular/material@"17.3.10"
npm ERR!   还有 6 个依赖来源 (@angular/platform-browser, ...)

npm ERR! 无法解析依赖:
npm ERR! @ng-bootstrap/ng-bootstrap@16.0.0 要求 peer 依赖 @angular/common@"^17.0.0"
npm ERR! node_modules/@ng-bootstrap/ng-bootstrap
npm ERR!   根项目依赖 @ng-bootstrap/ng-bootstrap@"^16.0.0"

npm ERR! 冲突的 peer 依赖: @angular/common@17.3.10
npm ERR! node_modules/@angular/common
npm ERR!   @ng-bootstrap/ng-bootstrap@16.0.0 的 peer 依赖要求 @angular/common@"^17.0.0"
npm ERR!   node_modules/@ng-bootstrap/ng-bootstrap
npm ERR!     根项目依赖 @ng-bootstrap/ng-bootstrap@"^16.0.0"

npm ERR! 修复上游依赖冲突，或使用 --force 或 --legacy-peer-deps 参数重试命令
npm ERR! 以接受不正确（可能导致运行异常）的依赖解析结果。

npm ERR! 完整报告请查看:

✖ 包安装失败，请查看以上信息。

错误2：@angular-eslint/schematics 与 Angular CLI 18 冲突 #

是否继续？Yes
npm ERR! 代码 ERESOLVE
npm ERR! ERESOLVE 无法解析依赖

npm ERR! 解析依赖时出错: @angular-eslint/schematics@17.3.0
npm ERR! 已找到: @angular/cli@18.0.1
npm ERR! node_modules/@angular/cli
npm ERR!   根项目的开发依赖 @angular/cli@"~18.0.0-next.3"

npm ERR! 无法解析依赖:
npm ERR! @angular-eslint/schematics@17.3.0 要求 peer 依赖 @angular/cli@">= 17.0.0 < 18.0.0"
npm ERR! node_modules/@angular-eslint/schematics
npm ERR!   根项目的开发依赖 @angular-eslint/schematics@"17.3.0"

npm ERR! 冲突的 peer 依赖: @angular/cli@17.3.8
npm ERR! node_modules/@angular/cli
npm ERR!   @angular-eslint/schematics@17.3.0 的 peer 依赖要求 @angular/cli@">= 17.0.0 < 18.0.0"
npm ERR!   node_modules/@angular-eslint/schematics
npm ERR!     根项目的开发依赖 @angular-eslint/schematics@"17.3.0"

npm ERR! 修复上游依赖冲突，或使用 --force 或 --legacy-peer-deps 参数重试命令
npm ERR! 以接受不正确（可能导致运行异常）的依赖解析结果。

npm ERR! 完整报告请查看:
npm ERR! C:\Users\DR99\AppData\Local\npm-cache\_logs\2024-05-28T08_17_08_293Z-eresolve-report.txt

npm ERR! 本次运行的完整日志可在以下位置查看:
npm ERR!     C:\Users\DR99\AppData\Local\npm-cache\_logs\2024-05-28T08_17_08_293Z-debug-0.log
✖ 包安装失败，请查看以上信息。

解决步骤 #

1. 升级不兼容依赖 #

这是最稳妥的方案，确保所有依赖与 Angular 18 兼容：

• 更新 @ng-bootstrap/ng-bootstrap：v16 只支持 Angular 17，升级到支持 Angular 18 的 v17+ 版本：

  npm install @ng-bootstrap/ng-bootstrap@latest
  

• 更新 @angular-eslint/schematics：v17 只兼容 Angular CLI 17，升级到支持 CLI 18 的 v18+ 版本：

  npm install @angular/eslint/schematics@latest --save-dev
  

2. 重新安装 Angular Material #

依赖更新完成后，重新执行安装命令：

ng add @angular/material

3. 临时规避方案（仅测试环境使用） #

如果无法立即升级依赖，可通过 npm 参数强制跳过冲突检查，但可能引发潜在兼容性问题：

ng add @angular/material --force
# 或
ng add @angular/material --legacy-peer-deps

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