javascript - なぜ「traceur 404 (Not Found)」は ngx-bootstrap を追加したときだけですか?

Question

「ngx-bootstrap」を追加しようとするまで、アプリケーションは正常に動作していましたが、次のエラーが表示されます。

(index):20 Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/traceur
    Error: XHR error (404 Not Found) loading http://localhost:3000/traceur
        at XMLHttpRequest.wrapFn [as __zone_symbol___onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:1056:39)
        at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:424:31)
        at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:191:47)
        at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:486:38)
    Error loading http://localhost:3000/traceur
    Unable to load transpiler to transpile http://localhost:3000/node_modules/ngx-bootstrap/ng2-bootstrap.js
    Error loading http://localhost:3000/node_modules/ngx-bootstrap/ng2-bootstrap.js as "ngx-bootstrap" from http://localhost:3000/app/app.module.js
        at XMLHttpRequest.wrapFn [as __zone_symbol___onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:1056:39)
        at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:424:31)
        at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:191:47)
        at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:486:38)
    Error loading http://localhost:3000/traceur
    Unable to load transpiler to transpile http://localhost:3000/node_modules/ngx-bootstrap/ng2-bootstrap.js
    Error loading http://localhost:3000/node_modules/ngx-bootstrap/ng2-bootstrap.js as "ngx-bootstrap" from http://localhost:3000/app/app.module.js

次のような非常に多くのソリューションを試しました: - systemjs.config.js を更新します - typescript コメント (/**) を確認します - .TS の in-staid で umd ファイルをインポートします

しかし、それらのどれもエラーを解決できません。誰かが私が間違ったことを説明できますか? 適切な提案...

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <pre class="card card-block card-header">Model: {{selected | json}}</pre>
    <input [(ngModel)]="selected"
           [typeahead]="states"
           class="form-control">
  `,
})
export class AppComponent  { 
    public selected: string;
    public states: string[] = ['Alabama', 'Alaska', 'Arizona', 'Arkansas',
        'California', 'Colorado',
        'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho',
        'Illinois', 'Indiana', 'Iowa',
        'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts',
        'Michigan', 'Minnesota',
        'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
        'New Jersey', 'New Mexico',
        'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon',
        'Pennsylvania', 'Rhode Island',
        'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
        'Virginia', 'Washington',
        'West Virginia', 'Wisconsin', 'Wyoming'];
}

app.module.ts

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

    import { AppComponent }  from './app.component';
    import { UserComponent }  from './components/user.component';



    import { TypeaheadModule } from 'ngx-bootstrap';


    @NgModule({
      imports:      [ BrowserModule, FormsModule, TypeaheadModule.forRoot()],
      declarations: [ AppComponent, UserComponent ],
      bootstrap:    [ AppComponent ]
    })
    export class AppModule { }

systemjs.confing.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',


      'ngx-bootstrap': 'npm:ngx-bootstrap'    

    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
        app: {
            defaultExtension: 'js',
            meta: {
                './*.js': {
                    loader: 'systemjs-angular-loader.js'
                }
            }
        },
        rxjs: {
            defaultExtension: 'js'
        }
        'ngx-bootstrap': {
            main: 'ng2-bootstrap.js',
            defaultExtension: 'js'
        }
    }
  });
})(this);