각도 2 부트 스트랩 모달

Question

저는 앵귤러 2를 처음 접했고 외부 라이브러리, 특히 부트 스트랩 모달을 사용하는 방법을 완전히 이해하려고합니다.

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

모듈은 응용 프로그램에서 가져온 :

내 index.html을에서

npm install ng2-bootstrap-modal 

, 나는 다음이 있다는 것을 확인했다 : https://www.npmjs.com/package/ng2-bootstrap-modal의 지시에 따라

는

, 나는 다음과 같은 실행 .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)); 
    } 
} 

왜 다음과 같은 메시지가 표시됩니까? 모든 도움을 많이

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

감사 : 정확히 필요로하는 것은

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

현재와 같은을 보이는, 내 system.config.js에서 할 수 있습니다!

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