ng-bootstrap - 轮播不工作答案

【问题标题】：ng-bootstrap - Carousel not workingng-bootstrap - 轮播不工作
【发布时间】：2018-09-14 16:46:06
【问题描述】：

我正在测试 ng-bootstrap 上的所有组件，出于某种原因，我可以让轮播开始工作。所有其他 ng-bootstrap 组件都可以正常工作。从https://ng-bootstrap.github.io/#/components/carousel/examples输入代码后，查看结果时出现空白屏幕。

这是控制台中的错误消息。

Error: StaticInjectorError(AppModule)[AppComponent -> HttpClient]: 
  StaticInjectorError(Platform: core)[AppComponent -> HttpClient]: 
    NullInjectorError: No provider for HttpClient!
    at _NullInjector.get (core.js:1002)
    at resolveToken (core.js:1300)
    at tryResolveToken (core.js:1242)
    at StaticInjector.get (core.js:1110)
    at resolveToken (core.js:1300)
    at tryResolveToken (core.js:1242)
    at StaticInjector.get (core.js:1110)
    at resolveNgModuleDep (core.js:10854)
    at NgModuleRef_.get (core.js:12087)
    at resolveDep (core.js:12577)

这是显示在我的 VS Code 问题选项卡上的错误消息。

'Identifier 'images' is not defined. The component declaration, template variable declarations, and element references do not contain such a member'
at: '31,22'

【问题讨论】：

标签： angular bootstrap-4 carousel ng-bootstrap

【解决方案1】：

抛出这个错误是因为HttpClient 不可用并且 Angular 不知道如何解决它。

让HttpClient 在应用程序中随处可见。

打开根AppModule app.module.ts
从@angular/common/http 导入HttpClientModule 符号
将其添加到@NgModule.imports 数组中

示例app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http'; // Step 2
import { CarouselModule } from 'ngx-bootstrap';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule, // Step 3
    CarouselModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

【讨论】：

是的。在你的帮助下，我让它工作得很好。

【解决方案2】：

httpClient 这是一个模块，它允许 Angular 的应用程序与 APIs 一起工作以使用后端服务 ng-booststrap 不使用这个模块可能这个错误是因为你正在使用一些外部资源，无论如何这是解决方法。

转到您的应用模块
从@angular/common/http 导入HttpClientModule 符号
将其添加到 @NgModule 导入数组中

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http'; 
import { CarouselModule } from 'ngx-bootstrap';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    CarouselModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在 Angular 中，大多数包必须导入到您将要使用它们的模块中，始终检查包中的文档。

【讨论】：