2017-03-02 3 views
0

私はangular2でwebpackを使用しています。実行時にng2-bootstrap-modalからbootstrapmodalmoduleをインポートする際に失敗します。参考リンクは次のとおりです。予期しない値 'BootstrapModalModule'モジュール 'AppModule'によってインポートされました

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

ng2-bootstrap-modal

そして、ここが私のファイルです

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(); 
    } 
} 
+0

あなたはこの 'BootstrapModalModule.forRoot()'のようにそれをインポートしようとすることができ、フォームの? – echonax

+0

'forRoot does not exist'と表示されてコンパイルエラーが発生します – Unnati

答えて

0

Ng2BootstrapからModalModuleをインポートすることはできますか?

ModalModule.forRoot(), 

wokkingは私が

+0

webpackでその動作例を共有できますか? – Unnati

+0

申し訳ありませんが、私はプロダクションアプリであることはできませんが、私のモジュールは "ng2-bootstrap"のimport {ModalModule}です。 インポート配列にインポートされたモジュール: ModalModule.forRoot()、ng2の最新版にない場合は、最新版にアップグレードしてください – Uak

関連する問題