Angular 12.1.4版本使用ng命令添加ng-bootstrap失败求助

嘿，我懂你作为Angular新手碰到这种依赖安装报错的憋屈感——别慌，这个问题基本是版本不兼容搞的鬼，咱们一步步来搞定它：

核心原因：版本匹配踩坑了 #

@ng-bootstrap/ng-bootstrap的版本和Angular版本是严格绑定的，你用的Angular 12.1.4只能搭配特定版本的ng-bootstrap。现在最新版的ng-bootstrap已经不再支持Angular 12了，直接用ng add命令会自动拉取不兼容的版本，这就是报错的根源。

明确一下版本对应关系：Angular 12.x → @ng-bootstrap/ng-bootstrap 11.x

具体解决步骤 #

1. 先清理残留的不兼容版本（如果之前试过安装） #

打开cmd进入你的Angular项目根目录，执行：

npm uninstall @ng-bootstrap/ng-bootstrap

2. 安装适配的ng-bootstrap版本 #

执行这条命令，安装专门适配Angular 12的11.x版本：

npm install @ng-bootstrap/ng-bootstrap@11

3. 安装Bootstrap CSS（ng-bootstrap只依赖样式文件） #

ng-bootstrap不需要Bootstrap的JS部分，只需要它的样式，咱们安装适配的Bootstrap 5.x版本：

npm install bootstrap@5

4. 在项目中引入Bootstrap样式 #

打开项目根目录的angular.json文件，找到styles数组，把Bootstrap的CSS路径加进去：

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

5. 在AppModule中导入ng-bootstrap模块 #

打开src/app/app.module.ts，导入NgbModule并加入到imports数组里：

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [
    // 你的组件声明
  ],
  imports: [
    // 其他已导入的模块（比如BrowserModule）
    NgbModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

做完这些步骤后，重启你的Angular项目（ng serve），应该就能正常用ng-bootstrap的组件啦。

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