模块“ AppModule”导入的异常值“ BootstrapModalModule”

Question

i am using webpack with angular2. it fails while importing bootstrapmodalmodule from ng2-bootstrap-modal at runtime. Reference link is : ng2-bootstrap-modal

And here's my files :

app.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from "@angular/common";
import { BrowserModule } from '@angular/platform-browser';
import { BootstrapModalModule } from 'ng2-bootstrap-modal';
import { ConfirmComponent } from './shared/login/confirm.component';
import { AppComponent }  from './app.component';


@NgModule({
  declarations: [ AppComponent, ConfirmComponent], 
  imports: [ CommonModule, BrowserModule, BootstrapModalModule ], 
  bootstrap: [ AppComponent ]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
 import { ConfirmComponent } from './shared/login/confirm.component';
 import { DialogService } from "ng2-bootstrap-modal";


@Component({
    selector: 'pm-app',
    templateUrl: './app.component.html'

})
export class AppComponent {
     constructor(private dialogService:DialogService) {}
        showConfirm() {
            let disposable = this.dialogService.addDialog(ConfirmComponent, {
                title:'Confirm title', 
                message:'Confirm message'})
                .subscribe((isConfirmed)=>{
                    //We get dialog result
                    if(isConfirmed) {
                        alert('accepted');
                    }
                    else {
                        alert('declined');
                    }
                });
            //We can close dialog calling disposable.unsubscribe();
            //If dialog was not closed manually close it by timeout
            // setTimeout(()=>{
            //     disposable.unsubscribe();
            // },10000);
        }
 }

confirm.component.ts

import { Component } from '@angular/core';
import { DialogComponent, DialogService } from "ng2-bootstrap-modal";


@Component({  selector: 'confirm',
  template: `<div class="modal-content">
                   <div class="modal-header">
                     <button type="button" class="close" (click)="close()" >&times;</button>
                     <h4 class="modal-title">{{title || 'Confirm'}}</h4>
                   </div>
                   <div class="modal-body">
                     <p>{{message || 'Are you sure?'}}</p>
                   </div>
                   <div class="modal-footer">
                     <button type="button" class="btn btn-primary" (click)="confirm()">OK</button>
                     <button type="button" class="btn btn-default" (click)="close()" >Cancel</button>
                   </div>
                 </div>`
})
export class ConfirmComponent extends DialogComponent {
  constructor(dialogService: DialogService) {
    super(dialogService);
  }
  confirm() {
    // we set dialog result as true on click on confirm button, 
    // then we can get dialog result from caller code 
    this.result = true;
    this.close();
  }
}

Answer 1

Can you try to just import ModalModule from Ng2Bootstrap ?

ModalModule.forRoot(),

it's wokking form me