Angular2 + ng-bootstrap例

Question

私はAngular2を学び始めました。私は自分のプロジェクトでng-bootstrapを使いたいと思います。しかし、私は働くプロジェクトを作ることができませんでした。 ng-bootstrapをインポートすると失敗します。私は初心者なので、問題がコードや他の何かを間違えているかどうかはわかりません。

ng-bootstrapとAngular2を使ってと簡単なプロジェクトを提供できますか？それで、私のコンピュータ上で動作させることができますか？

編集：

app.module.ts：

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; 
import { AppComponent } from './app.component'; 
import { NgbdAlertCloseable } from './ngbd-alert-closeable.component'; 


@NgModule({ 
    imports:  [ NgbModule, BrowserModule ], 
    declarations: [ NgbdAlertCloseable, AppComponent ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { } 

systemjs.config.js：

/** 
* System configuration for Angular 2 samples 
* Adjust as necessary for your application needs. 
*/ 
(function(global) { 
    // map tells the System loader where to look for things 
    var map = { 
    'app':      'app', // 'dist', 
    '@angular':     'node_modules/@angular', 
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api', 
    'rxjs':      'node_modules/rxjs', 
    '@ng-bootstrap':   'node_modules/@ng-bootstrap' 
    }; 
    // packages tells the System loader how to load when no filename and/or no extension 
    var packages = { 
    'app':      { main: 'main.js', defaultExtension: 'js' }, 
    'rxjs':      { defaultExtension: 'js' }, 
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }, 
    'ng-bootstrap':  { main: 'index.js', defaultExtension: 'js' } 
    }; 
    var ngPackageNames = [ 
    'common', 
    'compiler', 
    'core', 
    'forms', 
    'http', 
    'platform-browser', 
    'platform-browser-dynamic', 
    'router', 
    'router-deprecated', 
    'upgrade', 
    ]; 

    var ngBootstrapPackageNames = [ 
    'accordion', 
    'alert', 
    'bundles', 
    'buttons', 
    'carousel', 
    'collapse', 
    'dropdown', 
    'esm', 
    'modal', 
    'pagination', 
    'popover', 
    'progressbar', 
    'rating', 
    'tabset', 
    'timepicker', 
    'tooltip', 
    'typeahead', 
    'util' 
    ]; 

    // Individual files (~300 requests): 
    function packIndex(pkgName) { 
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' }; 
    } 
    // Bundled (~40 requests): 
    function packUmd(pkgName) { 
    packages['@angular/'+pkgName] = { main: 'bundles/' + pkgName + '.umd.js', defaultExtension: 'js' }; 
    } 
    function ngBootstrapPackIndex(pkgName) { 
    packages['@ng-bootstrap/ng-bootstrap/' + pkgName] = {main: 'index.js', defaultExtension: 'js'}; 
    } 
ngBootstrapPackageNames.forEach(ngBootstrapPackIndex); 
    // Most environments should use UMD; some (Karma) need the individual index files 
    var setPackageConfig = System.packageWithIndex ? packIndex : packUmd; 
    // Add package entries for angular packages 
    ngPackageNames.forEach(setPackageConfig); 
    var config = { 
    map: map, 
    packages: packages 
    }; 
    System.config(config); 
})(this); 

エラー：

Answer 1

私が変更

'ng-bootstrap':  { main: 'index.js', defaultExtension: 'js' } 

'@ng-bootstrap/ng-bootstrap':   { main: 'index.js', defaultExtension: 'js' } 

としてsystemjs.config.jsでラインそしてそれは働きました！