编辑:我尝试应用他的答案中提供的修复程序@Thierry，但是我仍然遇到相同的错误。
我通过遵循本教程并应用@Thierry的修复程序创建了一个完整项目(没有任何注释的干净项目)的存储库:https://github.com/dragGH102/angular2-tutorial-part4-test
我正在https://angular.io/docs/ts/latest/tutorial/toh-pt4.html上关注Angular 2的教程
在第4部分的结尾时，出现以下错误:
SyntaxError: Unexpected token <(…)Zone.run @ angular2-polyfills.js:1243
我什至试图:
错误堆栈跟踪
SyntaxError: Unexpected token <(…)
Zone.run @ angular2-polyfills.js:1243
zoneBoundFn @ angular2-polyfills.js:1220
lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:468
lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:480
lib$es6$promise$$internal$$publish @ angular2-polyfills.js:451
lib$es6$promise$$internal$$publishRejection @ angular2-polyfills.js:401
(anonymous function) @ angular2-polyfills.js:123
Zone.run @ angular2-polyfills.js:1243
zoneBoundFn @ angular2-polyfills.js:1220
lib$es6$promise$asap$$flush @ angular2-polyfills.js:262
显然(例如angular2: Uncaught SyntaxError: Unexpected token <)是由于浏览器由于错误而找不到有效的JS代码，但我无法弄清楚出了什么问题。
这是我的代码(也可以在http://plnkr.co/edit/Q5F0mV8Hbdcr2rtZUSw5上获得)
index.html
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script>
System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true },
packages: {'app': {defaultExtension: 'ts'}}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
app.component.ts
import {Component, OnInit} from 'angular2/core';
import {Hero} from './hero';
import {HeroDetailComponent} from './hero-detail.component';
import {HeroService} from './hero.service';
@Component({
selector: 'my-app',
template:`
<h1>{{title}}</h1>
<h2>My Heroes</h2>
<ul class="heroes">
<li *ngFor="#hero of heroes"
[class.selected]="hero === selectedHero"
(click)="onSelect(hero)">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>
<my-hero-detail [hero]="selectedHero"></my-hero-detail>
`,
// for the sake of code readibility I removed "styles"
directives: [HeroDetailComponent],
providers: [HeroService],
})
export class AppComponent implements OnInit {
title = 'Tour of Heroes';
heroes: Hero[];
selectedHero: Hero;
constructor(private _heroService: HeroService) { }
getHeroes() {
this.heroes = this._heroService.getHeroes().then(heroes => this.heroes = heroes);
}
ngOnInit() {
this.getHeroes();
}
onSelect(hero: Hero) { this.selectedHero = hero; }
}
boot.ts
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
bootstrap(AppComponent);
hero-detail.component.ts
import {Component} from 'angular2/core';
import {Hero} from './hero';
@Component({
selector: 'my-hero-detail',
template: `
<div *ngIf="hero">
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]="hero.name" placeholder="name"/>
</div>
</div>`,
inputs: ['hero']
})
export class HeroDetailComponent {
hero: Hero;
}
hero.service.ts
import {Hero} from './hero';
import {HEROES} from './mock-heroes';
import {Injectable} from 'angular2/core';
@Injectable()
export class HeroService {
getHeroes() {
return Promise.resolve(HEROES);
}
}
hero.ts
export interface Hero {
id: number;
name: string;
}
mock-heroes.ts
import {Hero} from "./hero";
export var HEROES: Hero[] = [
{ "id": 11, "name": "Mr. Nice" },
{ "id": 12, "name": "Narco" },
{ "id": 13, "name": "Bombasto" },
{ "id": 14, "name": "Celeritas" },
{ "id": 15, "name": "Magneta" },
{ "id": 16, "name": "RubberMan" },
{ "id": 17, "name": "Dynama" },
{ "id": 18, "name": "Dr IQ" },
{ "id": 19, "name": "Magma" },
{ "id": 20, "name": "Tornado" }
];
最佳答案
我看了看你的笨拙，问题出在这行:
getHeroes() {
this.heroes = this._heroService.getHeroes().then(heroes => this.heroes = heroes);
}
实际上，您混合使用两种方法:
async管道在 promise 得到解决时显示数据@Component({
selector: 'my-app',
template:`
<li *ngFor="#hero of heroes">
(...)
</li>
`
})
export class AppComponent implements OnInit {
getHeroes() {
this.heroes = this._heroService.getHeroes();
}
}
then方法并在解析为组件属性时设置接收到的数据。在这种情况下，您不需要async管道@Component({
selector: 'my-app',
template:`
<li *ngFor="#hero of heroes">
(...)
</li>
`
})
export class AppComponent implements OnInit {
getHeroes() {
this._heroService.getHeroes().then(heroes => this.heroes = heroes);
}
}
在 fork 的plunkr中查看我的更新:http://plnkr.co/edit/Rw4kOzKFbVosaoe7dRL1?p=preview。
否则我看不到像
SyntaxError: Unexpected token <(…)这样的任何错误，但大多数情况下是因为您尝试加载JS文件并收到404错误...有关更多详细信息，请参见此问题:
关于syntax-error - Angular 2教程-第4部分: “SyntaxError: Unexpected token <(…)” ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35893320/