Javascript 为什么'；traceur 404（未找到）和#x27；仅在添加ngx引导时？

在我尝试添加“ngx引导”之前，应用程序运行良好，下面是错误

(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格式的umd文件

但是他们都不能解决一个错误，谁能解释我做错了什么？ 任何被采纳的建议

应用程序组件.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'];
}

    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 { }

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

systemjs.confing.js

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'];
}

    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 { }

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

---

尝试将ngx引导主程序更改为

bundles/ngx bootstrap.umd.js

，而不是

ng2 bootstrap.js

。因此，在

软件包中

，您的条目如下所示：

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

更多信息，请参阅