Dependency Injection in Angular2 - TypeScript syntax vs @Inject

Question

I'm using Angular2 build 2.0.0-alpha.34 and I'm not sure why these two different pieces of code are giving me different results.

The only difference is using @Inject(TitleService) titleService vs using titleService: TitleService

This correctly works (ES2015 way)

import {Inject, Component, View, bootstrap, NgFor} from 'angular2/angular2';
import {titleComponent} from './components/title';
import {TitleService} from './services/services';

// Annotation section
@Component({
    selector: 'my-app'
})
@View({
    templateUrl: './html/app.html',
    directives: [titleComponent, NgFor]
})
// Component controller
class MyAppComponent {
    titles: Array<Object>;
    constructor(@Inject(TitleService) titleService) {
        console.log(titleService)
        this.titles = titleService.getTitles();
    }
}

bootstrap(MyAppComponent,[TitleService]);

This doesn't work (TypeScript way), it doesn't ever make it to the console.log call in constructor, but it doesn't throw an error

import {Inject, Component, View, bootstrap, NgFor} from 'angular2/angular2';
import {titleComponent} from './components/title';
import {TitleService} from './services/services';

// Annotation section
@Component({
    selector: 'my-app'
})
@View({
    templateUrl: './html/app.html',
    directives: [titleComponent, NgFor]
})
// Component controller
class MyAppComponent {
    titles: Array<Object>;
    constructor(titleService: TitleService) {
        console.log(titleService)
        this.titles = titleService.getTitles();
    }
}

bootstrap(MyAppComponent,[TitleService]);

If I'm using TypeScript's way to inject, do I need to do something else somewhere?

Arnaud Boeglin · Accepted Answer · 2015-08-13 16:58:03Z

1

You need to add it in the viewBindings of your Component annotation :

viewBindings: [TitleService]

Note that you only need to do it once, say in the Root component and every other component within the hierarchy will get it injecting from the root component, as if the component's injector can't resolve the dependency it goes up until it finds it. If you define one viewBindings you should have the same instance everywhere I believe.

edit: renaming of parameter in alpha 34.

edited Aug 13, 2015 at 16:58

answered Aug 12, 2015 at 23:18

Arnaud Boeglin

7736 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jesse Good Over a year ago

The OP is injecting the service through bootstrap(MyAppComponent,[TitleService]), so I think it should work. Also viewInjector became viewBindings in alpha-34.

Arnaud Boeglin Over a year ago

@AnotherDev Two more things, viewInjector has been renamed bindings, and have you check that you declare your TitleService as Injectable ? I just did a check on a local project and just using the bindings property without bootstrapping the service, and it worked fine. But your code above should work at a first glance, do you get any error ?

tcigrand Over a year ago

No error. If I use viewBindings, I get the same problem. It works with @Inject, but not with TypeScript. How do I declare TitleService as Injectable? Right now it's just defined as a class

Arnaud Boeglin Over a year ago

you need to use the @Injectable decorator. And you can see here in the parameters of the constructor : documentation for ComponentAnnotation. So you have viewBindings, and bindings for the old viewInjector and appInjector. I did a test last night again and it worked fine with the bindings parameter.

tcigrand · Accepted Answer · 2015-08-13 15:20:03Z

0

I had TitleService defined in a JavaScript file, using an ES2015 class, I just needed to change it to a TypeScript file so it compiled correctly. Oops.

answered Aug 13, 2015 at 15:20

tcigrand

2,3872 gold badges16 silver badges26 bronze badges

Collectives™ on Stack Overflow

Dependency Injection in Angular2 - TypeScript syntax vs @Inject

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related