该应用程序运行良好，直到我尝试添加“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 - 检查打字稿注释 (/**) - 以 .TS 的形式导入 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);