Angular 15.0.0项目安装@ng-bootstrap/ng-bootstrap失败及组件失效求助

核心问题：版本不兼容 #

@ng-bootstrap/ng-bootstrap 与 Angular 版本严格绑定：

• Angular 15 对应 ng-bootstrap 14.x.x 版本
• 直接执行无版本指定的安装命令，或用 --legacy-peer-deps 强制安装，会导致版本不匹配，进而引发组件运行错误（比如你遇到的 Modal 无法工作）

解决步骤 #

1. 卸载现有不兼容版本

   npm uninstall @ng-bootstrap/ng-bootstrap
   

2. 安装对应兼容版本

   npm install @ng-bootstrap/ng-bootstrap@14.0.0
   

   注：也可安装 14.x 系列的最新版本（如 @14.2.0），确保和 Angular 15 完全兼容。

3. 确认 Bootstrap CSS 依赖
   ng-bootstrap 依赖 Bootstrap 5.x 的样式文件，需确保项目已正确引入：

   • 安装 Bootstrap：

     npm install bootstrap
     

   • 在 angular.json 的 styles 数组中添加 Bootstrap 样式路径：

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

4. 检查 Modal 组件的正确使用

   • 在对应模块中导入 NgbModalModule：

     import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
     
     @NgModule({
       imports: [NgbModalModule]
     })
     export class YourModule { }
     

   • 组件中注入 NgbModal 并调用的方式需符合 ng-bootstrap 14.x 的规范，避免使用已废弃的 API。

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