为什么'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 - 检查打字稿注释（/ **） - 导入 - 稳重的UMD文件的.TS

但他们都不能解决一个错误，任何人都可以解释我做错了什么吗？ 拨付任何建议...

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

Answer 1

尝试将您的ngx-bootstrap主更改为bundles/ngx-bootstrap.umd.js而不是ng2-bootstrap.js。所以，在packages，您的条目看上去像：

'ngx-bootstrap': { 
    main: 'bundles/ngx-bootstrap.umd.js', 
    defaultExtension: 'js' 
    }, 

见https://github.com/angular/angular/issues/11358更多。