Angular 2 service not being injected into component

Question

I have a service defined in my Angular2 (2.0.0-beta.0) application. It's something like this:

import {Injectable} from "angular2/core";

@Injectable()
export class MyService {
    constructor() {

    }

    getSomething() {
        return 'something';
    }
}

I have it listed in my bootstrap() function in my main app file so that it should be made available to my code in general:

bootstrap(App, [MyService, SomeOtherService, ROUTER_DIRECTIVES[);

Sometimes I can't use the service in a component, even though I have something like myService:MyService in the component constructor() function, like this:

import {MyService} from '../services/my.service';

@Component({
    selector: 'my-component',
    directives: [],
    providers: [],
    pipes: [],
    template: `
    <div><button (click)="doStuff()">Click Me!</button></div>
    `
})
export MyComponent {
    constructor(myService:MyService) {} // note the private keyword

    doStuff() {
        return this.myService.getSomething();
    }
}

In other places it works fine. In places where it doesn't work, I get a message like if I try to access it:

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

It basically means the service was not injected.

What is causing it to not be injected?

score 12 · Answer 1 · edited Mar 17 '18 at 19:14

This behaviour is totally normal.

In the constructor method of the component when you don't add the private or public keyword the myService variable is evaluated as a local variable, so it's destroyed at the end of the method call.

When you add private or public keyword, TypeScript will add the variable to the class property, so you can later call the property with this keyword.

constructor(myService: MyService) {
  alert(myService.getSomething());
  // This will works because 'myService', is declared as an argument
  // of the 'constructor' method.
}

doStuff() {
  return (this.myService.getSomething());
  // This will not works because 'myService' variable is a local variable
  // of the 'constructor' method, so it's not defined here.
}

[Typescript docs](http://www.typescriptlang.org/Handbook#classes-privatepublic-modifiers): "The keywords `public` and `private` also give you a shorthand for creating and initializing members of your class, by creating parameter properties. The properties let you create and initialize a member in one step." — Mark Rajcok, Dec 18 '15 at 22:52

score 10 · Accepted Answer · answered Dec 18 '15 at 20:44

10

The problem is that it appears that the dependency injection won't work unless you have the injected objects in the constructor marked as either private or public.

Adding either of those two things in front of the service injection in my component's constructor made it work fine:

import {MyService} from '../services/my.service';

@Component({
    selector: 'my-component',
    directives: [],
    providers: [],
    pipes: [],
    template: `
    <div><button (click)="doStuff()">Click Me!</button></div>
    `
})
export MyComponent {
    constructor(private myService:MyService) {} // note the private keyword

    doStuff() {
        return this.myService.getSomething();
    }
}

answered Dec 18 '15 at 20:44

Michael Oryl

20,856
14
77
117

I've been declaring them before the constructor and using `this.MyService = MyService` but I like this method.. – Dennis Smolek Dec 18 '15 at 23:09
3

I have mine exactly the same as yours and I still get 'myservice' is not defined error at runtime – Ryan Langton May 14 '16 at 13:48
1

I have done what you are saying but still not working and giving this same error – Abdeali Chandanwala Sep 01 '16 at 09:01
check the this value, for me it is the value of where it came from – Ben Taliadoros Jul 28 '17 at 16:35

Angular 2 service not being injected into component

2 Answers2

Linked