No Directive annotation found on AppComponent

Developer from somewhere

Received the following exception when following the “Tour of heroes” app quickstart:

No Directive annotation found on AppComponent

Turned out, my code was like this:

@Component({
    selector: 'my-app',
    template: '<h1></h1><h2> details!</h2>'
})

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

export class AppComponent {

when it should have been like this:

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

@Component({
    selector: 'my-app',
    template: '<h1></h1><h2> details!</h2>'
})
export class AppComponent {

notice the annotation has to be on the AppComponent class.