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 concern.

Initially I've added the DataService class write after the my main component of app which is MyAppComponent like below.

import {Component, View} from 'angular2/core';
import {NgFor} from 'angular2/common';
import {bootstrap} from 'angular2/platform/browser';

@Component({
    'selector': 'my-app',
    template: `<div *ngFor="#item of items">{{item}}</div>`,
    directives: [NgFor],
    providers: [DataService] //taking service as injectable
})
export class MyAppComponent {
    items: Array<number>;
    constructor(service: DataService) {
        this.items = service.getItems(); //retrieving list to bind on the UI.
    }
}
//created service, but its after the component which has meta annotation
export class DataService {
    items: Array<number>;
    constructor() {
        this.items = [1, 2, 3, 4];
    }
    getItems() {
        return this.items; //return the items list
    }
}

bootstrap(MyAppComponent)

Above code compiles correctly, but at run-time it throws below error.

EXCEPTION: Cannot resolve all parameters for MyAppComponent(undefined). Make sure they all have valid type or annotations.

After 2 hours playing with the code, I shifted the DataService just above the MyAppComponent which got worked. I'm really glad that issue solved.

But I'm very curious to know that, why it wasn't working if I placed DataService class right after the class with MetaAnnotation over it?

Edit

I tried solution give by @Günter Zöchbauer like below,

import {Component, View, Inject, forwardRef} from 'angular2/core';
import {NgFor} from 'angular2/common';
import {bootstrap} from 'angular2/platform/browser';

@Component({
    'selector': 'my-app',
    template: `<div *ngFor="#item of items">{{item}}</div>`,
    directives: [NgFor],
    providers: [DataService] //tried commenting this still throws error.
})
export class MyAppComponent {
    items: Array<number>;
    constructor(@Inject(forwardRef(() => DataService)) service: DataService) {
        this.items = service.getItems();
    }
}

but still getting error in console. which looks wiered

EXCEPTION: TypeError: Cannot read property 'toString' of undefined

score 3 · Accepted Answer · edited May 23 '17 at 10:30

3

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: `<div *ngFor="#item of items">{{item}}</div>`,
    directives: [NgFor],
    providers: [forwardRef(() => DataService)] //taking service as injectable
})
export class MyAppComponent {
    items: Array<number>;
    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

edited May 23 '17 at 10:30

Community

1
1

answered Jan 17 '16 at 13:25

Günter Zöchbauer

623,577
216
2,003
1,567

1

@Gunter in this case the forwardRef must go in the providers property – Eric Martinez Jan 17 '16 at 13:37
@GünterZöchbauer this edit has solved my problem..but may I know why we need to do that twice? – Pankaj Parkar Jan 17 '16 at 14:12
1

I assume because on both places you're referring a class that is not yet known because both lines are before the class declaration. – Günter Zöchbauer Jan 17 '16 at 14:14

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

1 Answers1

Linked