Ng2-bootstrap does not work in Angular 2 ("alert" is not a known element :)

Question

I installed ng2-bootstrap in a project running Angular 2.0.1 through:

npm install ng2-bootstrap --save 

I set up my project as follows:

  //systemjs.config.js (function (global) { System.config({ paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'moment': 'node_modules/moment/moment.js', 'ng2-bootstrap/ng2-bootstrap': 'node_modules/ng2-bootstrap/bundles/ng2-bootstrap.umd.js', // our app is within the app folder app: 'app', // angular bundles 

and

 // app.module.ts import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { HttpModule } from '@angular/http'; import { Ng2BootstrapModule } from 'ng2-bootstrap/ng2-bootstrap'; import { AppComponent } from './app.component'; import { ClientModule } from './client/client.module'; @NgModule({ imports: [ Ng2BootstrapModule ], declarations: [ AppComponent ], schemas: [ CUSTOM_ELEMENTS_SCHEMA ], providers: [ NotificationService, { provide: LocationStrategy, useClass: HashLocationStrategy } ], bootstrap: [AppComponent] }) export class AppModule { } 

and

 // client.module.ts import { Ng2BootstrapModule } from 'ng2-bootstrap'; @NgModule({ imports: [ Ng2BootstrapModule ], declarations: [ ], providers: [ ] }) export class ClientModule { } 

and finally:

 // client-info.component.ts import { Component, OnInit, OnDestroy } from '@angular/core'; import { AlertComponent } from 'ng2-bootstrap/ng2-bootstrap'; @Component({ selector: 'client-info', template: ` <div > <alert type="success">hello</alert> </div> `, styleUrls: ['app/client/client.css'] }) export class ClientInfoComponent { constructor() { } ngOnInit(): void { } ngOnDestroy(): void { } } 

But when viewing the site I get the following error:

Unhandled promise rejection: pattern parsing errors: "alert" is not a known element: 1. If "alert" is an Angular component, then make sure that it is part of this> module. 2. If "alert" is a web component, add "CUSTOM_ELEMENTS_SCHEMA" to> "@ NgModule.schemas" of this component to suppress this message. ("

[ERROR →] hello

Obviously, I'm doing something wrong, but what?

Answer 1

You have app.module.ts should be like this. It helps me.

 // app.module.ts import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { HttpModule } from '@angular/http'; import { Ng2BootstrapModule } from 'ng2-bootstrap/ng2-bootstrap'; import { ClientModule } from './client/client.module'; import { AlertModule } from 'ng2-bootstrap/components/alert'; @NgModule({ imports: [ Ng2BootstrapModule, AlertModule ], declarations: [ AppComponent ], schemas: [ CUSTOM_ELEMENTS_SCHEMA ], providers: [ NotificationService, { provide: LocationStrategy, useClass: HashLocationStrategy } ], bootstrap: [AppComponent] }) export class AppModule { } 

And change client-info.component.ts to this

  // client-info.component.ts import { Component, OnInit, OnDestroy } from '@angular/core'; import { AlertModule } from 'ng2-bootstrap/components/alert'; @Component({ selector: 'client-info', template: ` <div > <alert type="success">hello</alert> </div> `, styleUrls: ['app/client/client.css'] }) export class ClientInfoComponent { constructor() { } ngOnInit(): void { } ngOnDestroy(): void { } } 

Answer 2

The answer dilvish.john worked for me, except that in my .ts component I had to put

import { AlertModule } from 'ng2-bootstrap/alert';

But I don’t understand the logic: why in app.module we had to import "ng2-bootstrap / ng-2bootstrap", and in the component we had to import "ng2-bootstrap / alert"?

1- is not the Ng2BootstrapModule module available for all components since we imported it into app.module? and therefore the AlertModule must be available without specifying it explicitly

2-, and if we do this explicitly in the component, should we not use import from 'Ng2BootstrapModule/alert'?

Thanks,