|Official guide broken?| Can't bind to 'ngFor' since it isn't a known native property

Question

I'm using the latest version of Angular2 as of today, and following the official example on the Angular 2 website. https://angular.io/docs/ts/latest/tutorial/toh-pt2.html
I'm trying to parse an array using *ngFor and get the following exception Template parse errors: Can't bind to 'ngFor' since it isn't a known native property .
Iv'e looked at other post who's issue was syntax, but as far as I can tell there is nothing wrong syntax wise.

Could Someone please tell me where I'm going wrong. Thanks!!!

app.component.ts

import {Component} from 'angular2/core';

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


@Component({
  selector: 'my-app',
  template: `
        <h1>{{title}}</h1>
        <h2>My Heroes</h2>
        <ul class="heroes">
          <li *ngFor="let hero of heroes">

          </li>
        </ul>
        <h2>{{hero.name}} details</h2>
        <div><label>id: </label>
        {{hero.id}}</div>
        <div><label>name: </label>
        <input [(ngModel)] = "hero.name" 
        placeholder="Hero Name">
        </div>
    `,
})


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

  public heroes = HEROES;
}

const HEROES:Hero[] = [
  {id: 11, name: 'Mr. Nice'},
  {id: 12, name: 'Narco'},
  {id: 13, name: 'bombboy'},
  {id: 14, name: 'Dr. Deseract'},
  {id: 15, name: 'Miss. Mistique'},
  {id: 16, name: 'codeopolos'},
  {id: 17, name: 'jupitarious'}
];

boot.ts

///<reference path="../node_modules/angular2/typings/browser.d.ts"/>
import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from "./app.component";
bootstrap(AppComponent);

Answer 1

This error is happening because you are using a deprecated version of angular 2 . I can tell it by the way you're importing angular modules.

On newer versions is no longer needed to import ngFor or ngIf.

On top of that, there is no reason to build anything using any version prior to release candidate.

Answer 2

您必须从库中import ngFor

import {FORM_DIRECTIVES, NgFor, NgIf} from '@angular/common';

Answer 3

Thanks for the insight, I was running an old version on Angular. works fine now.