Angular 4中Bootstrap轮播组件（ngb-carousel）报错求助

你遇到的这个报错核心原因很明确：ngb-carousel并不是原生Bootstrap自带的组件，它是ng-bootstrap库专门为Angular封装的组件，和你是否引入Bootstrap JS文件没有直接关联（不过Bootstrap的样式文件还是必须的）。下面是一步步的解决方案：

1. 安装适配Angular 4的ng-bootstrap依赖 #

Angular版本和ng-bootstrap版本是严格对应的，Angular 4只能用ng-bootstrap的1.x版本，先检查你的项目是否已经安装了这个依赖，如果没有，执行以下命令：

npm install @ng-bootstrap/ng-bootstrap@1.0.0 --save

2. 在对应模块中导入组件模块 #

找到你使用ngb-carousel的那个模块（比如根模块AppModule，或者某个功能子模块），导入NgbCarouselModule（按需导入能帮你继续控制体积，没必要一次性导入所有ng-bootstrap组件）：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgbCarouselModule } from '@ng-bootstrap/ng-bootstrap'; // 导入轮播组件模块
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgbCarouselModule // 添加到imports数组，让Angular识别这个组件
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 确认Bootstrap样式已正确引入 #

ng-bootstrap依赖Bootstrap的基础样式，所以要确保样式文件已经加载：

• 如果你用的是Angular CLI 1.x（对应Angular 4），打开.angular-cli.json，在styles数组里添加Bootstrap的CSS路径：

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

• 或者直接在src/styles.css中导入：

  @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
  

做完这些步骤后，重启你的Angular开发服务器，ngb-carousel应该就能正常渲染和工作了。

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