角2のブートストラップモーダル

Question

私は角2をかなり新しくしています。私は外部ライブラリ、特にブートストラップモーダルの使い方を完全に理解しようとしています。

がhttps://www.npmjs.com/package/ng2-bootstrap-modalの指示に従い、私は次のことを実行しました。

<!--Bootstrap CSS--> 
    <link rel="stylesheet" href="Content/bootstrap.min.css"> 

モジュールがアプリにインポートされます。私のindex.htmlで

npm install ng2-bootstrap-modal 

、私は、次のしていることを確認しました.module.ts：

私は次のような理由がありますか？

まさに、現在のように見えた、私のsystem.config.jsに何をすべきか

GET http://localhost:3000/ng2-bootstrap-modal 404 (Not Found) 

：

/** 
* System configuration for Angular samples 
* Adjust as necessary for your application needs. 
*/ 
(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: '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', 
     'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js' 
    }, 

    // packages tells the System loader how to load when no filename and/or no extension 
    packages: { 
     app: { 
     main: './main.js', 
     defaultExtension: 'js' 
     }, 
     rxjs: { 
     defaultExtension: 'js' 
     } 
    } 
    }); 

    // Load "./app/main.ts" (gets full path from package configuration above). 
    // -- 
    // NOTE: We are attaching the resultant promise to the global scope so that other 
    // scripts may listen for the successful loading of the application. 
    this.bootstrapping = System 
    .import("app") 
    .then(
     function handleResolve() { 
     console.info("System.js successfully bootstrapped app."); 
     }, 
     function handleReject(error) { 
     console.warn("System.js could not bootstrap the app."); 
     console.error(error); 
     return (Promise.reject(error)); 
     } 
    ); 

})(this); 

すべての助けをありがとうそんなに！

Answer 1

あなたのマップセクションの下にsystem.config.jsにこれらを追加

'moment':   'node_modules/moment', 
'ng2-bootstrap': 'node_modules/ng2-bootstrap', 

と下のパッケージセクション

'ng2-bootstrap':    { format: 'cjs', main: 'bundles/ng2-bootstrap.umd.js', defaultExtension: 'js' }, 
    'moment':      { main: 'moment.js', defaultExtension: 'js' }, 

LIVE DEMO