angular 2 - tour of heroes - Unexpected token ] - polyfills library

Question

export class Hero {
 id: number;
 name: string;
}

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" (click)="onSelect(hero)" [class.selected]="hero === selectedHero">
     <span class="badge">{{hero.id}}</span> {{hero.name}}
    </li>
  </ul>
  <my-hero-detail [hero]="selectedHero"></my-hero-detail>
     `,
     styles: [
      `
      .selected { color: green; }
      `
     ],
     directives: [HeroDetailComponent],
     providers: [HeroService],
})

export class AppComponent implements OnInit {
 public title = 'Tour of heroes';
 public heroes = Hero[];
 public selectedHero: Hero;

 constructor(private _heroService: HeroService) {}

 ngOnInit() {
  this.getHeroes();
 }

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

 onSelect(hero: Hero) {
  this.selectedHero = hero;
 }
}

I've seen similar issues with the Angular 2 Typescript intro tutorial but not exactly this one...

Error: SyntaxError: Unexpected token ](…) (angular2-polyfills.js.332)

Have tried the suggestions on changing the System.config in index.html but those don't work.

Im getting a red underline in my editor on the line though;

heroes = Hero[];

changing this to;

heroes = [];

fixes the error but gives me another as a result of not initialising to to an array. Im new to typescript so could be a simple syntax thing perhaps.

any help appreciated!

`heroes = Hero[];` with this have you imported `Hero` class form source path? — micronyks, Apr 11 '16 at 10:28
I think you want to change `public heroes = Hero[];` to `public heroes:Hero[];` — sreeramu, Apr 11 '16 at 11:12
thanks all esp sreeramu, you are very correct. can you explain why it needs to be assigned in this way? — tubbsy, Apr 11 '16 at 11:28
@tubbsy by declaring like `public heroes = Hero[];` you are not creating the array of Hero objects, even you can declare just `public heroes;` also should be ok. — sreeramu, Apr 11 '16 at 11:38
@sreeramu thanks for expl., not sure I can up vote you yet as I just joined. — tubbsy, Apr 11 '16 at 14:00

score 1 · Accepted Answer · answered Apr 11 '16 at 11:32

This is the code you used

export class AppComponent implements OnInit {
    public title = 'Tour of heroes';

    **public heroes = Hero[];**

    public selectedHero: Hero;

    constructor(private _heroService: HeroService) {}

    ngOnInit() {
        this.getHeroes();
    }

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

    onSelect(hero: Hero) {
        this.selectedHero = hero;
    }
}

Here the blocked code should be use as

public heroes : Hero[];

Thanks this did work for me as per sreeramu's comment. Is the assignment different just because '=' is used to create a local variable, whereas ':' is used to add a property to the instance? — tubbsy, Apr 11 '16 at 11:38

angular 2 - tour of heroes - Unexpected token ] - polyfills library

1 Answers1