Angular安装@ng-bootstrap/ng-bootstrap报ERESOLVE依赖冲突错误

报错核心原因 #

当前项目使用的Angular版本为@angular/common@14.0.5，但ng add指令默认拉取的@ng-bootstrap/ng-bootstrap@12.1.2版本仅适配Angular 13.x，peer依赖要求@angular/common@^13.0.0，版本不匹配触发npm依赖树解析失败。

之前尝试的方案未生效的核心原因：

• ng add指令不会透传--force、--legacy-peer-deps这类npm参数，所以加参数的方式对ng add流程无效
• 直接执行npm安装时未指定适配Angular 14的ng-bootstrap版本，拉取的始终是不兼容的旧版本
• 本地Angular已经是14.0.5的正式版本，执行核心包更新不会降级到Angular13匹配旧版ng-bootstrap

操作步骤 #

• 先清理之前安装失败的残留文件
  执行以下命令卸载残留包、清理npm缓存：

  npm uninstall @ng-bootstrap/ng-bootstrap
  npm cache clean --force
  

• 安装适配Angular 14的ng-bootstrap版本
  @ng-bootstrap/ng-bootstrap@13.x全系列版本原生适配Angular 14，直接指定版本安装即可：

  npm install @ng-bootstrap/ng-bootstrap@13.0.0
  

  如果安装过程中提示其他peer依赖警告，可追加--legacy-peer-deps参数执行。
• 手动完成初始化配置
  因为没有走ng add的自动配置流程，需要手动补两项配置：
  1. 打开根目录下的angular.json文件，找到项目构建配置里的styles数组，加入bootstrap的全局样式路径：

     "node_modules/bootstrap/dist/css/bootstrap.min.css"
     

  2. 打开根模块文件src/app/app.module.ts，导入ng-bootstrap的根模块，需要用到特定组件时也可以单独导入对应功能模块：

     import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
     
     @NgModule({
       declarations: [/* 你的组件声明 */],
       imports: [
         /* 你已有的其他模块导入，比如BrowserModule、AppRoutingModule等 */
         NgbModule
       ],
       providers: [],
       bootstrap: [/* 根组件 */]
     })
     export class AppModule { }
     

• 验证安装结果
  执行ng serve启动项目，引入任意ng-bootstrap组件测试（比如NgbAlert），无编译报错、组件正常渲染即说明安装成功。

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