从 Angular 2 RC5升级到 Angular 2 最终版本 ( 2.1.1 )后,我遇到了一个问题。我正在使用 system.js。我的所有打字稿代码在升级之前工作正常,我没有更新任何它。
这是我不断收到的错误:
Error: SyntaxError: Unexpected token <
at eval (<anonymous>)
Evaluating http://localhost:8888/traceur.js
Error loading http://localhost:8888/traceur.js
Error loading http://localhost:8888/node_modules/@angular/router/index.js as "@angular/router" from http://localhost:8888/js/typescript/app.module.jsZoneDelegate.invoke
我从 Angular 2 文档( https://angular.io/docs/ts/latest/guide/npm-packages.html)中复制了 package.json
这是我的 app.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { routing } from './app.routes';
import { SharedModule } from './shared/shared.module';
import { RouterModule } from '@angular/router';
@NgModule({
imports: [ BrowserModule,
RouterModule,
FormsModule,
HttpModule,
SharedModule,
routing ],
bootstrap: [ AppComponent ],
})
export class AppModule {}
编辑:这是我的 sytemjs.config.js 文件:
var map = {
'app': 'app', // 'dist',
'angular2': 'node_modules/angular2',
'@angular': 'node_modules/@angular',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'rxjs': 'node_modules/rxjs',
'zone.js': 'node_modules/zone.js',
'ng2-bootstrap': 'node_modules/ng2-bootstrap',
'moment': 'node_modules/moment',
'express': 'node_modules/express'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
'zone.js': { main: 'dist/index.js', defaultExtension: 'js' },
'ng2-bootstrap': { main: 'ng2-bootstrap.js', defaultExtension: 'js' },
'moment': { main: 'moment.js', defaultExtension: 'js' },
'notifications': { main: 'components.js', defaultExtension: 'js' },
'angular2-recaptcha': { defaultExtension: 'js', main:'index' },
'rxjs' : {main: 'Rx'},
'@angular/core' : {main: 'bundles/core.umd.js'},
'@angular/common' : {main: 'bundles/common.umd.js'},
'@angular/upgrade' : {main: 'bundles/upgrade.umd.js'},
'@angular/compiler' : {main: 'bundles/compiler.umd.js'},
'@angular/forms' : {main: 'bundles/forms.umd.js'},
'@angular/router' : {main: 'bundles/router.umd.js'},
'@angular/platform-browser' : {main: 'bundles/platform-browser.umd.js'},
'@angular/platform-browser-dynamic': {main: 'bundles/platform-browser-dynamic.umd.js'},
'@angular/http' : {main: 'bundles/http.umd.min.js'}
};
和我的 app.routes.ts 文件:
import { Routes, RouterModule } from '@angular/router';
// Components
import { HomeComponent } from './shared/components/home.component';
import { ClubComponent } from './shared/components/club.component';
import { BusinessPageComponent } from './shared/components/business-page.component';
const appRoutes: Routes = [
// Child routing
{
path: 'profil',
loadChildren: '/js/typescript/profile/profile.module#ProfileModule'
},
{
path: 'recherche',
loadChildren: '/js/typescript/job-search/job-search.module#JobSearchModule'
},
// Business page
{ path: 'etablissement/:businessId', component: BusinessPageComponent },
{ path: 'club/:clubId', component: BusinessPageComponent },
// Root
{ path: '', redirectTo: '/accueil', pathMatch: 'full'},
];
// - Updated Export
export const routing = RouterModule.forRoot(appRoutes, { useHash: true });