Angular 14环境下无法安装ng-bootstrap的问题求助

问题场景 #

在Angular 14环境下执行以下命令安装ng-bootstrap：

ng add @ng-bootstrap/ng-bootstrap

出现npm依赖解析错误，尝试添加--force参数重新执行后问题依旧，完整错误日志如下：

PS C:\Dev\Angular\my-app> ng add @ng-bootstrap/ng-bootstrap --force
ℹ Using package manager: npm
✔ Found compatible package version: @ng-bootstrap/ng-bootstrap@13.0.0.
✔ Package information loaded.

The package @ng-bootstrap/ng-bootstrap@13.0.0 will be installed and executed.
Would you like to proceed? Yes
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: carecenter-sniffer-app@0.0.0
npm ERR! Found: @angular/core@14.1.0
npm ERR! node_modules/@angular/core
npm ERR! peer @angular/core@">=2.0.0 || >=4.0.0 || >=5.0.0" from angular-font-awesome@3.1.2
npm ERR! node_modules/angular-font-awesome
npm ERR! angular-font-awesome@"^3.1.2" from the root project
npm ERR! peer @angular/core@"14.1.0" from @angular/animations@14.1.0
npm ERR! node_modules/@angular/animations
npm ERR! peerOptional @angular/animations@"14.1.0" from @angular/platform-browser@14.1.0
npm ERR! node_modules/@angular/platform-browser
npm ERR! peer @angular/platform-browser@"14.1.0" from @angular/forms@14.1.0
npm ERR! node_modules/@angular/forms
npm ERR! @angular/forms@"^14.1.0" from the root project
npm ERR! 3 more (@angular/router, @angular/platform-browser-dynamic, the root project)
npm ERR! @angular/animations@"^14.1.0" from the root project
npm ERR! 7 more (@angular/common, @angular/compiler, @angular/forms, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! @ng-bootstrap/ng-bootstrap@"13.0.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @angular/core@14.2.6
npm ERR! node_modules/@angular/core
npm ERR! peer @angular/core@"14.2.6" from @angular/forms@14.2.6
npm ERR! node_modules/@angular/forms
npm ERR! @angular/forms@"^14.1.0" from the root project
npm ERR! peer @angular/forms@"^14.1.0" from @ng-bootstrap/ng-bootstrap@13.0.0
npm ERR! node_modules/@ng-bootstrap/ng-bootstrap
npm ERR! @ng-bootstrap/ng-bootstrap@"13.0.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\aw\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\aw\AppData\Local\npm-cache_logs\2022-10-14T18_32_47_956Z-debug-0.log
✖ Packages installation failed, see above.

问题原因 #

错误核心是npm的peer依赖解析机制：@ng-bootstrap/ng-bootstrap@13.0.0要求的@angular/forms版本依赖@angular/core@14.2.6，但项目当前使用的是@angular/core@14.1.0，版本不匹配。--force参数无法解决这个核心冲突，因为它只是强制覆盖依赖，而非忽略peer依赖检查。

解决方案 #

方案一：升级Angular到14.2.x版本（推荐） #

通过升级Angular核心包到对应版本，确保所有依赖版本匹配：

1. 在项目根目录执行升级命令：

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

2. 升级完成后，再次执行ng-bootstrap安装命令：

ng add @ng-bootstrap/ng-bootstrap

方案二：使用--legacy-peer-deps参数跳过peer依赖检查 #

如果暂时无法升级Angular，可以用该参数让npm使用旧的peer依赖解析逻辑，忽略版本冲突：

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

注意：此方案可能存在潜在兼容性风险，安装完成后需全面测试项目功能是否正常。

参数说明 #

• --force：强制安装，可能覆盖现有依赖，但无法解决peer依赖版本不匹配的根本问题
• --legacy-peer-deps：跳过peer依赖版本检查，更适合处理这类冲突场景

内容的提问来源于stack exchange，提问作者A. Wheatman