Angular2 ng-bootstrap-没有提供程序错误 [英] Angular2 ng-bootstrap - no provider error

问题描述

我正在尝试将ng bootstrap UI集成到我的Angular 2项目中. 按照此处找到的简单说明进行操作后: https://ng-bootstrap.github.io/#/getting-started 使用任何ngb bootstrap标签时出现以下错误:

I am trying to integrate ng bootstrap UI into my Angular 2 project. After following the simple instructions found here: https://ng-bootstrap.github.io/#/getting-started i get the following error when using any ngb bootstrap tag:

错误:没有NgbAlertConfig的提供者！

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { StocksComponent } from './stocks/stocks.component';

import { HighlightDirective } from './highlight.directive';
import { StockService } from './stock.service';
import { DateFormatterPipe } from './date-formatter.pipe'

import { routing } from './app.routing';
import { DashboardComponent } from './dashboard/dashboard.component'

import { CurrencyService } from './currency.service';
import { BondsDirective } from './bonds.directive';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';


@NgModule({
  declarations: [
    AppComponent,
    StocksComponent,
    HighlightDirective,
    DateFormatterPipe,
    DashboardComponent,
    BondsDirective
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routing,
    NgbModule
  ],
  providers: [StockService, CurrencyService],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

}

app.component.html

    <ngb-alert>
        Random Message
    </ngb-alert>

angular-cli.json

    {
      "project": {
        "version": "1.0.0-beta.17",
        "name": "my-prog-cli"
      },
      "apps": [
        {
          "root": "src",
          "outDir": "dist",
          "assets": "assets",
          "index": "index.html",
          "main": "main.ts",
          "test": "test.ts",
          "tsconfig": "tsconfig.json",
          "prefix": "app",
          "mobile": false,
          "styles": [
            "../node_modules/bootstrap/dist/css/bootstrap.css",
            "styles.css"
          ],
          "scripts": [
              "../node_modules/jquery/dist/jquery.js",
              "../node_modules/tether/dist/js/tether.js",
              "../node_modules/bootstrap/dist/js/bootstrap.js"
          ],
          "environments": {
            "source": "environments/environment.ts",
            "dev": "environments/environment.ts",
            "prod": "environments/environment.prod.ts"
          }
        }
      ],
      "addons": [],
      "packages": [],
      "e2e": {
        "protractor": {
          "config": "./protractor.conf.js"
        }
      },
      "test": {
        "karma": {
          "config": "./karma.conf.js"
        }
      },
      "defaults": {
        "styleExt": "css",
        "prefixInterfaces": false
      }
    }

推荐答案

像这样将NgbModule导入到app.module.ts中-

import NgbModule in your app.module.ts like this-

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

并将其添加到ngmodule-

and add it in imports section of ngmodule-

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgbModule.forRoot(), ...],
  bootstrap: [AppComponent]
})

看看这是否有帮助.

这篇关于Angular2 ng-bootstrap-没有提供程序错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！