Angular 14安装@ng-bootstrap/ng-bootstrap失败PhpStorm报错解决

• 优先排查版本兼容问题
  ng-bootstrap和Angular主版本严格绑定，Angular 14仅兼容13.x版本的ng-bootstrap。直接执行不带版本号的安装命令会拉取最新版，最新版要求Angular 16+，必然触发依赖冲突报错。
  先执行ng version确认本地@angular/core、@angular/cli版本均为14.x，清理残留后指定兼容版本安装：

  # 卸载之前安装失败残留的包
  npm uninstall @ng-bootstrap/ng-bootstrap
  # 指定适配Angular14的稳定版安装
  ng add @ng-bootstrap/ng-bootstrap@13.1.1
  

• 排查依赖缓存与锁文件冲突
  如果指定版本后依然报错，大概率是之前安装失败留下的损坏缓存、锁文件，或者进程占用导致写入失败：
  1. 停掉本地运行的ng serve服务、所有占用项目node_modules目录的进程
  2. 删除项目根目录下的node_modules文件夹、package-lock.json（使用yarn则删yarn.lock，使用pnpm则删pnpm-lock.yaml）
  3. 执行npm cache clean --force清理本地npm缓存
  4. 执行npm install重新安装项目基础依赖
  5. 重新执行带版本号的ng-bootstrap安装命令
• 排查终端运行环境问题
  PhpStorm内置终端的权限、执行策略、npm源配置异常也会导致安装失败：
  • Windows环境下右键选择「以管理员身份运行」启动PhpStorm，避免权限不足导致脚本无法写入配置文件
  • 执行npm config get registry检查当前npm源，如果是失效的第三方源，切换为稳定源：

    # 切换为npm官方源
    npm config set registry https://registry.npmjs.org/
    # 国内网络可切换为npmmirror镜像
    npm config set registry https://registry.npmmirror.com/
    

  • 如果终端是PowerShell，执行Set-ExecutionPolicy RemoteSigned -Scope CurrentUser放开本地脚本执行权限，重启终端后再尝试安装
• 自动脚本失败手动兜底
  ng add本质是自动完成依赖安装、模块导入、样式引入三个操作，自动脚本跑不通可以手动配置：
  1. 执行命令安装对应版本依赖：

     npm install @ng-bootstrap/ng-bootstrap@13.1.1 bootstrap@5.2.3 @popperjs/core@^2.11.6
     

  2. 打开src/app/app.module.ts，导入ng-bootstrap核心模块：

     import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
     @NgModule({
       imports: [
         // 保留原有其他导入项
         NgbModule
       ]
     })
     export class AppModule { }
     

  3. 打开根目录的angular.json，在构建配置的styles数组中引入bootstrap样式文件：

     "styles": [
       "src/styles.css",
       "./node_modules/bootstrap/dist/css/bootstrap.min.css"
     ],
     

  4. 重启本地开发服务，调用任意ng-bootstrap组件（比如ngbAlert）验证功能正常即可。

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