Angular 2 tutorial - part 4: "SyntaxError: Unexpected token <(…)"

Question

EDIT: I tried to apply the fix @Thierry provided in his answer, however I keep getting the same error. I created a repository with the full project (clean with no comments) as it resulted by following the tutorial and after applying @Thierry's fix: https://github.com/dragGH102/angular2-tutorial-part4-test

I am following tutorial for Angular 2 at https://angular.io/docs/ts/latest/tutorial/toh-pt4.html

At the end of part 4 I am getting the following error:

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

I even tried to:

copy-paste the Plunkr provided at http://plnkr.co/edit/?p=preview but same error.
remove the Promise part (which seems to be the cause of the error based on the stacktrace below)
compile TS files myself (instead of letting it do by "npm start")

Error stacktrace

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

Apparently (e.g. angular2: Uncaught SyntaxError: Unexpected token < ) this is due to the browser not find valid JS code due to an error but I can't figure out what's wrong .

Here is my code (also available at 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" }
];

Community · Accepted Answer · 2017-05-23 12:09:47Z

2

I had a look at your plunkr and the problem comes from this line:

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

In fact, you mix two approaches:

either you set the promise on a component property and then the async pipe to display data when the promise is resolved

@Component({
  selector: 'my-app',
  template:`
    <li *ngFor="#hero of heroes">
      (...)
    </li>
  `
})
export class AppComponent implements OnInit {
  getHeroes() {
    this.heroes = this._heroService.getHeroes();
  }
}

either you call the then method and set the received data when resolving into a component property. In this case, you don't need the async pipe

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

See my updates in a forked plunkr: http://plnkr.co/edit/Rw4kOzKFbVosaoe7dRL1?p=preview.

Otherwise I can't see any error like SyntaxError: Unexpected token <(…) but most of time it's because you try to load a JS file and you get a 404 error...

See this question for more details:

How to debug Angular2 in Chrome

edited May 23, 2017 at 12:09

CommunityBot

11 silver badge

answered Mar 10, 2016 at 14:13

Thierry Templier

203k44 gold badges407 silver badges366 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dragonmnl Over a year ago

thanks for your answer Thierry. I will eventually try to debug it later on. Perhaps you can have a look at the repository I created with my full code? github.com/dragGH102/angular2-tutorial-part4-test thank you

Collectives™ on Stack Overflow

Angular 2 tutorial - part 4: "SyntaxError: Unexpected token <(…)"

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related