I found out depend on the order I put my class at TypeScript, the javascript won't generate the angular \_\_decorate functions, bug for TypeScript right? or am I doing it wrong?

1. **Error** on console, platform-browser.umd.js:2306EXCEPTION: No Directive annotation found on AppComponent

```
import {Component} from '@angular/core';
@Component({
    selector: 'my-app',
    template: `
    <h1>{{title}}</h1>
    <h2>{{name.firstname}} man!</h2>
    <h3>{{name.id}}</h3>
    <div>
        <label>name: </label>
        <input [(ngModel)]="name.firstname" placeholder="name">
    </div>
    `
})
export class Name {
    id: number;
    firstname: string;
}
export class AppComponent {
    title = 'hi yo';
    name: Name = {
        id: 1,
        firstname: 'tt'
    };
}

```

2. This is working...

```
import {Component} from '@angular/core';

export class Name {
    id: number;
    firstname: string;
}
@Component({
    selector: 'my-app',
    template: `
    <h1>{{title}}</h1>
    <h2>{{name.firstname}} man!</h2>
    <h3>{{name.id}}</h3>
    <div>
        <label>name: </label>
        <input [(ngModel)]="name.firstname" placeholder="name">
    </div>
    `
})
export class AppComponent {
    title = 'hi yo';
    name: Name = {
        id: 1,
        firstname: 'tt'
    };
}

```

3. **Error** This is also break, same error.

```
import {Component} from '@angular/core';

export class Name {
    id: number;
    firstname: string;
}
export class AppComponent {
    title = 'hi yo';
    name: Name = {
        id: 1,
        firstname: 'tt'
    };
}
@Component({
    selector: 'my-app',
    template: `
    <h1>{{title}}</h1>
    <h2>{{name.firstname}} man!</h2>
    <h3>{{name.id}}</h3>
    <div>
        <label>name: </label>
        <input [(ngModel)]="name.firstname" placeholder="name">
    </div>
    `
})

```