ng-bootstrap Carousel组件无法正常工作问题咨询

嘿，这个问题我之前也踩过坑！错误提示里的StaticInjectorError指向HttpClient，说明你的Angular应用没有正确导入HttpClientModule——ng-bootstrap的Carousel组件在加载示例中的远程图片时，内部依赖了HttpClient服务，但你的模块里没提供这个服务，所以才会触发报错；其他组件能正常运行，是因为它们不需要用到HttpClient。

解决起来很简单，按以下步骤操作就行：

1. 打开你的根模块文件（通常是app.module.ts）
2. 从@angular/common/http中导入HttpClientModule：

   import { HttpClientModule } from '@angular/common/http';
   

3. 将HttpClientModule添加到模块的imports数组里，和BrowserModule、NgbModule放在一起：

   @NgModule({
     declarations: [AppComponent],
     imports: [
       BrowserModule,
       HttpClientModule, // 关键就是添加这一行
       NgbModule
     ],
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule { }
   

如果你的Carousel是在懒加载的子模块中使用的，记得也要在对应的子模块里导入HttpClientModule（不过根模块导入后整个应用都能复用，所以也可以只在根模块加一次）。

另外，哪怕你把示例里的远程图片换成本地路径，也还是需要导入HttpClientModule——因为ng-bootstrap的Carousel内部逻辑依然依赖这个服务的存在，只是不会实际发起网络请求而已。

做完这些重启你的Angular应用，Carousel应该就能正常显示了！

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