angular - how to add angular2-bootstrap-confirm to angular2? -

i new angular-2, trying add angular2-bootstrap-confirm showing cannot errors in console. had followed following docs click here there way this. can 1 me on issue.

this trying get.is there way effect.

app.component.ts

import { component } '@angular/core'; import {confirmoptions, position} 'angular2-bootstrap-confirm'; import {positioning} 'angular2-bootstrap-confirm/position/position';  @component({   selector: 'my-app',   template: `<button       class="btn btn-default"       mwlconfirm       [title]="title"       [message]="message"       placement="left"       (confirm)="confirmclicked = true"       (cancel)="cancelclicked = true"       [(isopen)]="isopen">       click me!     </button>  `, providers: [      confirmoptions,     {provide: position, useclass: positioning}   ] }) export class appcomponent {  public title: string = 'popover title';   public message: string = 'popover description';   public confirmclicked: boolean = false;   public cancelclicked: boolean = false;   public isopen: boolean = false; } 

app.module.ts

import { ngmodule }      '@angular/core'; import { browsermodule } '@angular/platform-browser'; import { appcomponent }   './app.component'; import {confirmmodule} 'angular2-bootstrap-confirm'; @ngmodule({   imports:      [ browsermodule,confirmmodule ],   declarations: [ appcomponent ],   bootstrap:    [ appcomponent ] }) export class appmodule { } 

systemjs.config.js

/**  * system configuration angular 2 samples  * adjust necessary application needs.  */ (function (global) {   system.config({     paths: {       // paths serve alias       'npm:': 'node_modules/'     },     // map tells system loader things     map: {       // our app within app folder       app: 'app',       // angular bundles       '@angular/core': 'npm:@angular/core/bundles/core.umd.js',       '@angular/common': 'npm:@angular/common/bundles/common.umd.js',       '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',       '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',       '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',       '@angular/http': 'npm:@angular/http/bundles/http.umd.js',       '@angular/router': 'npm:@angular/router/bundles/router.umd.js',       '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',       // other libraries       'rxjs':                       'npm:rxjs',       'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',     },     // packages tells system loader how load when no filename and/or no extension     packages: {       app: {         main: './main.js',         defaultextension: 'js'       },       rxjs: {         defaultextension: 'js'       },       'angular2-in-memory-web-api': {         main: './index.js',         defaultextension: 'js'       }     }   }); })(this); 

maybe modal window hidden. try change placement property like:

placement="right" 

and don't forget add bootstrap css

update:

change systemjs.config.js:

map: {   app: 'app',   ....   'angular2-bootstrap-confirm': 'npm:angular2-bootstrap-confirm' }, packages: {   ...   'angular2-bootstrap-confirm': {      main: 'angular2-bootstrap-confirm.js',      defaultextension: 'js'   } } 

plunker example