角4 - ブートストラップモーダルが例外をスローする

Question

「未知数（約束）：エラー：ComponentLoaderFactoryのプロバイダがありません！ブートストラップModalModuleをインポートするコンポーネントにアクセスしようとしているときにエラーが発生しました。 （エラーが発生した）

import { ModalModule } from 'ngx-bootstrap/modal'; 

@NgModule({ 
    imports: [BrowserModule, RouterModule, ModalModule.forRoot()], 
... 

template.component.ts：

app.module.tsここ

import { TemplateRef } from '@angular/core'; 
import { BsModalService } from 'ngx-bootstrap/modal'; 
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service'; 

@Component({ 
    selector: 'templateController', 
    templateUrl: './templateController.component.html', 
    providers: [BsModalService] 
}) 

export class TemplateControllerComponent implements OnInit { 

    modalRef: BsModalRef; 

    constructor(private modalService: BsModalService) { 

私はそれなしで、NGX-ブートストラップする/モーダルの経路を提供します、それはJS必要なファイルを見つけることが失敗し、404 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: { 
      // our app is within the app folder 
      'app': '/src/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', 
      'tslib': 'npm:tslib/tslib.js', 
      '@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js', 

      // other libraries 
      'rxjs': 'npm:rxjs', 
      'moment': 'node_modules/moment/moment.js', 
      'ngx-bootstrap': 'node_modules/ngx-bootstrap/bundles/ngx-bootstrap.umd.js', 
      'ngx-bootstrap/modal': 'node_modules/ngx-bootstrap/bundles/ngx-bootstrap.umd.js' 

     }, 
     // packages tells the System loader how to load when no filename and/or no extension 
     packages: { 
      app: { 
       defaultExtension: 'js', 
       meta: { 
        './*.js': { 
         loader: 'src/systemjs-angular-loader.js' 
        } 
       } 
      }, 
      rxjs: { 
       defaultExtension: 'js' 
      } 
      //, 
      //"ngx-bootstrap/modal": { 
      // "defaultExtension": "js" 
      //} 

     } 
    }); 
})(this); 

Answer 1

のために追加してくださいモジュールインポートのRoot（）（ngx-bootstrapのモジュール）

動作しない場合は、入力コンポーネントを提供する必要があります。あなたのapp.moduleで

：あなたが動的にブートストラップのコンポーネントをロードしているので、

は、あなたのモジュールファイルに@NgModuleでentryComponentフィールドを（）が必要です。以下のように、entryComponents配列にブートストラップコンポーネントを追加してください。

@NgModule({ 
declaration: [], 
imports: [], 
    entryComponents: [ModalComponent,..] 
})