Angular 2教程 - 第4部分：「SyntaxError：意外的令牌<（...）」

編輯：我試圖應用在他的答案中提供的修復@Thierry，但我不斷收到相同的錯誤。我創建了完整的項目（清潔的，沒有評論）的倉庫，因爲它導致通過以下教程和應用@亨利的修復程序後：在https://angular.io/docs/ts/latest/tutorial/toh-pt4.html Angular 2教程 - 第4部分：「SyntaxError：意外的令牌<（...）」

我下面的教程角2在最後的第4部分，我收到以下錯誤：

SyntaxError: Unexpected token <(…)Zone.run @ angular2-polyfills.js:1243

我甚至想：

複製粘貼在http://plnkr.co/edit/?p=preview提供的Plunkr，但同樣的錯誤。
除去承諾的一部分（這似乎是錯誤的基於下面的堆棧跟蹤的原因）
編譯TS文件我自己（而不是讓它通過「故宮開始」做）

錯誤堆棧跟蹤

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

英雄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; 
}

模擬英雄。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" } 
];

來源

2016-03-09 dragonmnl

我在你plunkr一看，問題來源於此行：

getHeroes() { 
    this.heroes = this._heroService.getHeroes().then(heroes => this.heroes = heroes); 
}

事實上，你混兩種方法：

任你設置對組件屬性承諾，然後在解決承諾時顯示數據async

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

見分叉plunkr我更新：http://plnkr.co/edit/Rw4kOzKFbVosaoe7dRL1?p=preview。

，否則我看不到任何錯誤，如SyntaxError: Unexpected token <(…)但大部分時候是因爲你嘗試加載JS文件，你會得到一個404錯誤...

看到這個問題的更多細節：

How to debug Angular2 in Chrome

來源

2016-03-10 14:13:28

感謝您的回答蒂埃裏。我最終會嘗試稍後進行調試。也許你可以看看我用我的完整代碼創建的存儲庫？ https://github.com/dragGH102/angular2-tutorial-part4-test謝謝 – dragonmnl

Angular 2教程 - 第4部分：「SyntaxError：意外的令牌<（...）」

回答

相關問題