Question

我正在测试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'

Answer 1

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

使HttpClient在应用中随处可用。

打开根AppModule app.module.ts
从HttpClientModule

@angular/common/http

将其添加到@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 { }

Answer 2

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

转到您的App模块
从@ angular / common / http
将其添加到@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中，大多数软件包必须导入到您要使用它们的模块中，并始终检查软件包中的文档。

ng-bootstrap - 轮播不工作

2 个答案: