无法读取未定义的属性'forRoot' - Angular 4.1 - System JS - NG BootStrap

Question

我只是想在我的简单Angular 4应用程序中包含ng-bootstrap。

我收到错误

  

“申请时无法读取未定义的属性'forRoot'   负荷。

我正在使用SystemJS进行此配置：

<script src="https://unpkg.com/es6-shim"></script>
<script src="https://unpkg.com/reflect-metadata"></script>
<script src="https://unpkg.com/zone.js?main=browser"></script>
<script src="https://unpkg.com/systemjs"></script>
<script>
    System.config({
        paths: {
            'npm:': 'https://unpkg.com/'
        },
        map: {
            // angular bundles
            '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
            '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
            '@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/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.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/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
            '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
            '@ng-bootstrap/ng-bootstrap': 'npm:@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js',
            'rxjs': 'npm:rxjs@5.4.0',
        },
        packages: {
            '': {
                format: 'register',
                defaultExtension: 'js'
            }
        }
    });
    System.import('main.js').catch(function (err) { console.error(err); });
</script>

我的tsconfig.json是这样的：

{
  "compileOnSave": true,
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "outDir": "./Scripts"
  },
  "exclude": [
    "node_modules"
  ]
}

这是我的app.module.ts代码

import { NgModule, enableProdMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule, JsonpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { AppComponent } from './app.component';
import { BidService } from './app.services.bid'; 

@NgModule({
    declarations: [AppComponent],
    imports: [
        NgbModule.forRoot(),
        BrowserModule,
        FormsModule,
        HttpModule,
        JsonpModule,
        BrowserAnimationsModule,
    ],
    bootstrap: [AppComponent],
    providers: [
        BidService
    ]
})
export class AppModule { }

我创建了一个带有转换javascript的plunker：

http://plnkr.co/edit/IWSR6PmbgQ6i7A6qrdlu

非常感谢