Angular 2 Bootstrap Modal

Question

我對Angular 2相當陌生，我試圖完全理解如何使用外部庫，特別是Bootstrap模態。

繼https://www.npmjs.com/package/ng2-bootstrap-modal的指示，我跑了以下內容：

npm install ng2-bootstrap-modal 

在我的index.html，我覈實，我有以下幾點：

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

模塊在應用進口.module.ts：

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 
import { Router } from '@angular/router'; 

// Custom Components 
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NavbarComponent } from './navbar/index'; 
import { ProjectComponent, ProjectService } from './project/index'; 
import { AccomplishmentComponent, AccomplishmentService } from './accomplishment/index'; 
import { OptionService } from './option/index'; 
import { HomeComponent } from './home/index'; 
import { LoadingComponent } from './loading/index'; 

import { ProjectPipe } from './project/project.pipe'; 
import { BootstrapModalModule } from 'ng2-bootstrap-modal'; 

@NgModule({ 
    imports: [ BrowserModule, FormsModule, HttpModule, AppRoutingModule, BootstrapModalModule ], 
    declarations: [ AppComponent, ProjectComponent, NavbarComponent, HomeComponent, AccomplishmentComponent, LoadingComponent, ProjectPipe ], 
    providers: [ ProjectService, OptionService, AccomplishmentService ], 
    bootstrap: [ AppComponent ] 
}) 

export class AppModule { 
    // Diagnostic only: inspect router configuration 
    constructor(router: Router) { 
    console.log('Routes: ', JSON.stringify(router.config, undefined, 2)); 
    } 
} 

爲什麼我會得到以下內容？

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

究竟有什麼需要我system.config.js完成，目前是這樣的：

/** 
* 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