Angular项目中使用ng add @ng-bootstrap/ng-bootstrap安装Bootstrap失败

问题重现 #

执行ng add @ng-bootstrap/ng-bootstrap时触发npm依赖解析错误，核心冲突为：当前项目使用@angular/core@15.2.2，但@ng-bootstrap/ng-bootstrap@14.0.1要求的peer依赖为@angular/core@15.2.3，同时项目中已存在ngx-bootstrap@10.2.0，进一步加剧依赖冲突。完整错误日志如下：

使用包管理器: npm
√ 找到兼容的包版本: @ng-bootstrap/ng-bootstrap@14.0.1。
√ 已加载包信息。

将安装并执行包@ng-bootstrap/ng-bootstrap@14.0.1。是否继续？是
npm ERR! code ERESOLVE
npm ERR! ERESOLVE 无法解析依赖
npm ERR!
npm ERR! 解析时: 1-first-project@0.0.0
npm ERR! 找到: @angular/core@15.2.2
npm ERR! node_modules/@angular/core
npm ERR!   peer @angular/core@"15.2.2" 来自 @angular/animations@15.2.2
npm ERR!   node_modules/@angular/animations
npm ERR!     peerOptional @angular/animations@"15.2.2" 来自 @angular/platform-browser@15.2.2
npm ERR! node_modules/@angular/platform-browser
npm ERR!       peer @angular/platform-browser@"15.2.2" 来自 @angular/forms@15.2.2
npm ERR! node_modules/@angular/forms
npm ERR!         peer @angular/forms@"^15.0.0" 来自 ngx-bootstrap@10.2.0
npm ERR! node_modules/ngx-bootstrap
npm ERR!         还有1个依赖（根项目）
npm ERR!       还有3个依赖（@angular/platform-browser-dynamic、@angular/router、根项目）
npm ERR!     peer @angular/animations@"^15.0.0" 来自 ngx-bootstrap@10.2.0
npm ERR! node_modules/ngx-bootstrap
npm ERR!       ngx-bootstrap@"^10.2.0" 来自根项目
npm ERR!     还有1个依赖（根项目）
npm ERR! peer @angular/core@"15.2.2" 来自 @angular/common@15.2.2
npm ERR! node_modules/@angular/common
npm ERR!     peer @angular/common@"15.2.2" 来自 @angular/forms@15.2.2
npm ERR! node_modules/@angular/forms
npm ERR!       peer @angular/forms@"^15.0.0" 来自 ngx-bootstrap@10.2.0
npm ERR! node_modules/ngx-bootstrap
npm ERR!         ngx-bootstrap@"^10.2.0" 来自根项目
npm ERR!       还有1个依赖（根项目）
npm ERR!     peer @angular/common@"15.2.2" 来自 @angular/platform-browser@15.2.2
npm ERR! node_modules/@angular/platform-browser
npm ERR!       peer @angular/platform-browser@"15.2.2" 来自 @angular/forms@15.2.2
npm ERR! node_modules/@angular/forms
npm ERR!         peer @angular/forms@"^15.0.0" 来自 ngx-bootstrap@10.2.0
npm ERR! node_modules/ngx-bootstrap
npm ERR!         还有1个依赖（根项目）
npm ERR!       还有3个依赖（@angular/platform-browser-dynamic、@angular/router、根项目）
npm ERR!     还有4个依赖（@angular/platform-browser-dynamic、@angular/router等）
npm ERR!   还有7个依赖（@angular/compiler、@angular/forms等）
npm ERR!
npm ERR! 无法解析依赖:
npm ERR! @ng-bootstrap/ng-bootstrap@"14.0.1" 来自根项目
npm ERR!
npm ERR! 冲突的peer依赖:
npm ERR! @angular/core@15.2.3
npm ERR! node_modules/@angular/core
npm ERR! peer @angular/core@"15.2.3" 来自 @angular/forms@15.2.3
npm ERR! node_modules/@angular/forms
npm ERR!     @angular/forms@"^15.2.0" 来自根项目
npm ERR!     peer @angular/forms@"^15.0.0" 来自 @ng-bootstrap/ng-bootstrap@14.0.1
npm ERR! node_modules/@ng-bootstrap/ng-bootstrap
npm ERR! @ng-bootstrap/ng-bootstrap@"14.0.1" 来自根项目
npm ERR!
npm ERR! 修复上游依赖冲突，或使用--force或--legacy-peer-deps参数重试命令，以接受不正确（可能损坏）的依赖解析。
npm ERR!
npm ERR! 完整报告请查看: npm ERR! C:\Users\m4357\AppData\Local\npm-cache_logs\2023-03-22T09_51_52_268Z-eresolve-report.txt

npm ERR! 本次运行的完整日志位于: npm ERR! C:\Users\m4357\AppData\Local\npm-cache_logs\2023-03-22T09_51_52_268Z-debug-0.log
× 包安装失败，请查看以上内容。

解决方案 #

1. 升级Angular核心包至匹配版本 #

@ng-bootstrap/ng-bootstrap@14.0.1要求的peer依赖为@angular/core@15.2.3，将项目中Angular相关包统一升级到该版本：

# 使用Angular CLI升级（推荐）
ng update @angular/core @angular/cli --force

# 或直接用npm指定版本安装
npm install @angular/core@15.2.3 @angular/common@15.2.3 @angular/forms@15.2.3 @angular/platform-browser@15.2.3 @angular/platform-browser-dynamic@15.2.3 @angular/router@15.2.3

升级完成后重新执行ng add @ng-bootstrap/ng-bootstrap即可。

2. 使用--legacy-peer-deps绕过依赖检查 #

若暂时不想升级Angular版本，可在安装命令中添加--legacy-peer-deps参数，让npm忽略peer依赖冲突：

ng add @ng-bootstrap/ng-bootstrap --legacy-peer-deps

# 或直接用npm安装
npm install @ng-bootstrap/ng-bootstrap@14.0.1 --legacy-peer-deps

3. 移除冲突的Bootstrap封装库 #

项目中同时存在ngx-bootstrap和@ng-bootstrap/ng-bootstrap两个Bootstrap的Angular封装库，二者功能重叠可能引发依赖冲突。若无需ngx-bootstrap，可先卸载它：

npm uninstall ngx-bootstrap

卸载后重新安装@ng-bootstrap/ng-bootstrap即可。

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