title: Angular2: Cannot read property 'name' of undefined
body: <p>I am beginning to learn Angular2. I've been following the Heroes Tutorial provided at angular.io.
  All was working fine until, being annoyed by the clutter of HTML using the template,  I used template URL in its place, and moved the HTML to a file named hero.html.
  The error that is generated is, "Cannot read property 'name' of undefined".
  Strangely, the heroes variable which points to an array of objects can be accessed so that ngFor will produce the correct amount of "li" tags according to the number of objects in the array. However, the data of the objects of the array cannot be accessed.
  Furthermore, even a simple variable holding some text, will not display using {{}} brackets in the HTML (see provided code).</p>
  
  <p>app.component.ts</p>
  
  <pre><code>import { Component } from '@angular/core';
  @Component({
    selector: 'my-app',
    templateUrl: './hero.html',
    styleUrls:['./styles.css']
  })
  
  export class AppComponent {
    title = 'Tour of Heroes';
    heroes = HEROES;
    selectedHero:Hero;
  
    onSelect(hero: Hero):void{
        this.selectedHero = hero;
    }
  }
  
  export class Hero{
     id: number;
     name: string;
  }
  
  const HEROES: Hero[] = [
     { id: 1, name: 'Mr. Nice' },
     { id: 2, name: 'Narco' },
     { id: 3, name: 'Bombasto' },
     { id: 4, name: 'Celeritas' },
     { id: 5, name: 'Magneta' },
     { id: 6, name: 'RubberMan' },
     { id: 7, name: 'Dynama' },
     { id: 8, name: 'Dr IQ' },
     { id: 9, name: 'Magma' },
     { id: 10, name: 'Tornado' }
  ];
  </code></pre>
  
  <p>hero.html</p>
  
  <pre><code>&lt;h1&gt;{{title}}&lt;/h1&gt;
  &lt;h2&gt;My Heroes&lt;/h2&gt;
  &lt;ul class="heroes"&gt;
    &lt;li *ngFor="let hero of heroes"&gt;
      &lt;span class="badge"&gt;{{hero.id}}&lt;/span&gt; {{hero.name}}
    &lt;/li&gt;
  &lt;/ul&gt;
  &lt;h2&gt;{{hero.name}} details!&lt;/h2&gt;
  &lt;div&gt;
      &lt;label&gt;id: &lt;/label&gt;{{hero.id}}
  &lt;/div&gt;
  &lt;div&gt;
      &lt;label&gt;name: &lt;/label&gt;
      &lt;input [(ngModel)]="selectedHero.name" placeholder="name"&gt;
  &lt;div&gt;
  </code></pre>
  
  <p>Here is a photo:</p>
  
  <p><a href="https://i.stack.imgur.com/1SZfP.png" rel="noreferrer"><img src="https://i.stack.imgur.com/1SZfP.png" alt="enter image description here"></a></p>