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:
Error: No provider for NgbAlertConfig!
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 { }
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
}
<ngb-alert>
Random Message
</ngb-alert>
{
"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
}
}
import NgbModule in your app.module.ts like this-
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
and add it in imports section of ngmodule-
@NgModule({
declarations: [AppComponent, ...],
imports: [NgbModule.forRoot(), ...],
bootstrap: [AppComponent]
})
See if this helps.
For anyone else that's getting this error for a different component, e.g ngbDropdown
.. make sure you have the ngbDropdown
set on the parent element.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With