angular - ngbactivemodal - ngbdropdown

Angular2 ng-bootstrap-sin error de proveedor

Question

Estoy tratando de integrar ng bootstrap UI en mi proyecto Angular 2. Después de seguir las sencillas instrucciones que se encuentran aquí: https://ng-bootstrap.github.io/#/getting-started obtengo el siguiente error al usar cualquier etiqueta de arranque de ngb:

Error: ¡Ningún proveedor para 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
}
}

Answer 1

Para cualquier otra persona que esté recibiendo este error para un componente diferente, por ejemplo, ngbDropdown ... asegúrese de tener el conjunto ngbDropdown en el elemento principal.

Answer 2

importa NgbModule en tu app.module.ts como este-

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

y agregarlo en la sección de importaciones de ngmodule-

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

A ver si esto ayuda.