Ngx-bootstrap: No provider for alertconfig! - with angular-cli

Created on 20 Dec 2016  路  4Comments  路  Source: valor-software/ngx-bootstrap

I have run through the setup outlined here for angular-cli

When I run the webpage, I get this error in Chrome:
Error in ./AppComponent class AppComponent - inline template:2:2 caused by: No provider for AlertConfig!

If I go a step further than the tutorial above, and add the following to my angular-cli.json

"scripts": [ "../node_modules/ng2-bootstrap/ng2-bootstrap.js" ],

Then I get the following error:

VM1258:6Uncaught ReferenceError: require is not defined

Any suggestion would be appreciated.

Most helpful comment

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AlertModule } from 'ng2-bootstrap';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

All 4 comments

You now need to import with forRoot(). Docs need to be updated.
See https://github.com/valor-software/ng2-bootstrap/issues/1351

I am using 1.1.6-7 and has same issue. When I switch to 1.1.14-1. The problem disappears.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AlertModule } from 'ng2-bootstrap';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

I insertted AlertConfig into provider section. this error disappeared.

`import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { AlertConfig, AlertModule } from 'ngx-bootstrap/alert';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
AlertModule.forRoot()

],
providers: [AlertConfig],
bootstrap: [AppComponent]
})
export class AppModule { }`

Was this page helpful?
0 / 5 - 0 ratings