Class is not injectable if it is defined right after a component with meta annotation

Question

I just started off with Angular2 quick start project. Have a simple application working. I added DataService class, so that the code will have separation of con

Answer 1

JavaScript doesn't hoist classes. Either use forwardRef, move DataService to it's own file or move DataService class above MyAppComponent

@Component({
    'selector': 'my-app',
    template: `
{{item}}
`,
    directives: [NgFor],
    providers: [forwardRef(() => DataService)] //taking service as injectable
})
export class MyAppComponent {
    items: Array;
    constructor(@Inject(forwardRef(() => DataService)) service: DataService) {
        this.items = service.getItems(); //retrieving list to bind on the UI.
    }
}

See also
- Angular 2 error:
- http://blog.thoughtram.io/angular/2015/09/03/forward-references-in-angular-2.html