title: Why the order of classes matters in angular 2 component?
body: <p>I'm following angular2 official tutorial and about to make '2.The Hero Editor'.
  In app.component.ts file, I have two class, Hero and AppComponent.</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'my-app',
    template: `
      &lt;h1&gt;{{title}}&lt;/h1&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)]="hero.name" placeholder="name"&gt;
      &lt;/div&gt;
      `
  })
  
  export class Hero {
    id: number;
    name: string;
  }
  
  export class AppComponent {
    title = 'Tour of Heroes';
    hero: Hero = {
      id: 1,
      name: 'Windstorm'
    };
  }
  </code></pre>
  
  <p>Because AppComponent has member type of 'Hero' class, I thought Hero must declared before the AppComponent.
  But, then the weird error message was appear like below.</p>
  
  <pre><code>EXCEPTION: No Directive annotation found on AppComponent
  </code></pre>
  
  <p>And when I moved Hero class to next of AppComponent, it works... and I don't know why.
  Any advice would be appreciated. Thanks.</p>