Declaration or statement expected.

[q3e]

I get an error when replicating the angular2 official tutorial
The file is app.component.ts

import {Component} from '@angular/core';
@Component({
    selector: 'my-app',
    template: `
      <h1>{{title}}</h1>
      <h2>My Heroes</h2>
        <ul class="heroes">
          <li *ngFor="let hero of heroes">
            <span class="badge">{{here.id}}</span> {{hero.name}}
          </li>
        </ul>
      <h2>{{hero.name}} details!</h2>
      <div>
        <label>id: </label>{{hero.id}}
      </div>
      <div>
        <label>name: </label>
        <input [(ngModel)]="hero.name" placeholder="name">
      </div>
      `
})
export class AppComponent {
  title = 'Tour of Heroes';

  hero: Hero = {
    id: 1,
    name: 'Windstorm'
    };
}
export class Hero {
  id: number;
  name: string;
}
var HEROES: Hero[] = [
  { "id":11, "name": "Gandhi"},
  { "id":19, "name": "Tesla"},
  { "id":20, "name": "Saladin"},
];
public heroes = HEROES; // error:Declaration or statement expected.

when I hit save I get this alert:
Compile failed but emit succeeded
This error prevents me from running the lite sever with npm start.

[gregoj]

Though this is old, I ran into it. The documentation isn't clear and assumes you know a bit more about the Typescript superset than we do.

The code addition in the documentation:
public heroes = HEROES;

Should go within the AppComponent class definition:

export class AppComponent {
    title = 'Tour of Heroes';
    hero: Hero = {
        id: 1,
        name: 'windStorm'
    };

    public heroes = HEROES;
}

You'll find that everything works as it should from this point, at least in my experience.

[github-actions]

This issue has been marked as stale because it did not have any activity for the last 90 days or more. Remove the stale label or comment or this will be closed in 14 days