How to inject a service in Angular2

[Pete Moss]

I am using Angular2 2.0.0-alpha.32  and not having any luck injecting a service. I am simply following along in the Step by Step Guide:

https://angular.io/docs/js/latest/guide/displaying-data.html

but the example they show does not seem to work for me. Worked fine until I attempted to refactor the hard-coded names from the MyListComponent ctor into a FriendsService service. Now, nothing shows up, and the constructor of both the FriendsService and MyListComponent never even get called. I saw somewhere where appInjector was going away, but I tried that and componentServices, viewInjector and hostInjector. Nothing worked for me. Should be something simple, but not getting any love. Can someone help me?

/// <reference path="typings/angular2/angular2.d.ts" />

import {Component, View, bootstrap, NgFor} from 'angular2/angular2';


class FriendsService
{
    names: Array<string>;

    constructor()
    {
        this.names = ["Amit", "Dusan", "Kristin", "Mike"];
    }
}

@Component({
    selector: 'my-list',
    appInjector: [FriendsService]
})
@View({
    templateUrl: 'ShowList.html',
    directives: [NgFor]
})
class MyListComponent
{
    name: string;
    names: Array<string>;

    constructor(friendsService:FriendsService)
    {
        this.name = "Pete";
        this.names = friendsService.names;
    }
}

bootstrap(MyListComponent, [FriendsService]);

[Eric Martinez]

Hey there Pete! 

'appInjector' was removed in alpha 30 (see https://github.com/angular/angular/pull/2797)

You should use 'viewInjector' instead if it is a component and 'hostInjector' if it is a directive.

Regards.

[Eric Martinez]

It was removed in alpha 29 (https://github.com/angular/angular/blob/master/CHANGELOG.md), just rectifying my mistake.

[Pete Moss]

Thank you, Eric. I tried appInjector, viewInjector, componentServices, and hostInjector and nothing worked. I spent hours yesterday trying to puzzle it out. Then I discovered that I had not included --emitDecoratorMetadata in my Typescript 1.5 compiler settings. Aaargh. Once I did that, things worked fine. 

[Magnus Gudmundsson]

Hi, 

I also struggling with this one. 
my Typescript  cmd for sublime goes like this:  "cmd": ["tsc.cmd", "$file", "--watch", "-m","commonjs", "-t", "es5", "--emitDecoratorMetadata", "--experimentalDecorators"],

but it does no work. Pete, which of the Injectors did you end up using? 

Regards

Magnus

[Magnus Gudmundsson]

I got it to work! I had just forgotten about adding the FriendsService to the botstrap thingy... 

sorry about the noise. 

/Magnus

[Tahir Awan]

Hi,

I too, can't find how to inject Http (or $http?) service. Some examples mentioned adding an import of "angular2/di.d.ts" but I could not find it with "tsd" or in definitely-typed repo.

Please help.

Thanks.

[Pete Moss]

The way I injected the Http service is by adding 

viewInjector: [httpInjectables]

in my top-level root component that is created using bootstrap(). EG,

import {Component, View, bootstrap, httpInjectables} from "angular2/angular2";

@Component({
    selector: "litebrite-app",
    // Pre-register application-wide services
    // See http://victorsavkin.com/post/118372404541/the-core-concepts-of-angular-2
    viewInjector: [httpInjectables, EchoService, UserInfo]
})
@View({
    templateUrl: "ui/app/appA2.html",
    directives: [MainAreaCmpA2, BannerCmp]
})
class AppCmpA2 extends AppCmpBaseA2
{

...

}

bootstrap(AppCmpA2);

[Tahir Awan]

tried but no luck. tsc compiler error "error TS2305: Module '"angular2/angular2"' has no exported member 'httpInjectables'.".

I am now using npm to get angularjs but perhaps its a moving target.

[Eric Martinez]

Tahir,

If you are using npm to get the js bundles, I'm guessing you are using alpha35. If that's the case you should export 'HTTP_BINDINGS' from 'http/http' and include http.dev.js in your HTML,

Kind regards.

[Tahir Awan]

Eric,

I did that and to resolve this import, I added the following typing reference in gulpfile.js.

"node_modules/angular2/bundles/typings/angular2/http.d.ts"

but still TypeScript compiler is giving errors like "can't find name EventEmitter".

Regards,

[Eric Martinez]

Tahir,

I don't think you should modify that file, I mean, it has nothing to do with the typings and it is used to run the tests. 

EventEmitter should be imported from  'angular2/angular2'.

I recommend you to open a new thread, so we can see your problem better and you can specify what are you doing exactly.

[Tahir Awan]

Eric,

good suggestion.

I've started a new thread under "Importing http in an Angular2 + TypeScript project"