28

I want to inject a service to another service:

@Injectable()

export class Dispatcher {
}


@Injectable()

export class TodoStore {

    constructor(@Inject(Dispatcher) dispatcher:Dispatcher){ 

    }
}

But I always get Error: No provider for Dispatcher!

Thanks.

Abdulrahman Alsoghayer
  • 16,462
  • 7
  • 51
  • 56
Ian Zhang
  • 363
  • 1
  • 3
  • 6

3 Answers3

33

You need to provide your service somewhere. Please refer to angular2 docs

You could provide it in the bootstrap method:

bootstrap(AppComponent,[TodoStore,Dispatcher]);

or the app component:

@Component({
    ...
      providers:[TodoStore,Dispatcher]
}
...

Or in any other component, depending on your needs.

Also, you don't need to @Inject(Dispatcher) in the constructor. It's basically the same as

constructor(dispacher:Dispatcher){
}

Oh yeah, welcome to SO :)

Abdulrahman Alsoghayer
  • 16,462
  • 7
  • 51
  • 56
  • 1
    I still needed the `@Inject(Dispactcher)` in the constructor to make it work. – Ben Winding Oct 18 '16 at 12:37
  • What about if the method is called async? you can't access to the one injected into the constructor, you still need to inject it to the method itself, So: @Inject('Service') service – Alejandro Lora Nov 14 '16 at 16:40
  • @AlejandroLora I am not sure I understood your point correctly. But, I think you are using "this" incorrectly. If my guess is right, your issue is not related to injection. Please refer to [this post](http://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-context-inside-a-callback). If my guess wasn't correct, please provide a plunker with an example of the issue. – Abdulrahman Alsoghayer Nov 15 '16 at 14:02
  • I am confused, where is the bootstrap() method located? In which class? – Alexander Mills Jan 08 '18 at 00:17
6

Thank for the reply.

Since it is not a Component, the @Component(...) solution does not apply.

bootstrap(AppComponent,[TodoStore,Dispatcher]);

solution works. But that makes this main.ts a central place.

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
Ian Zhang
  • 363
  • 1
  • 3
  • 6
  • 2
    Why do you think the `@Component()` doesn't work? `@Component()` is where you register the provider, it can still be injectec to a service. – Günter Zöchbauer May 11 '16 at 15:48
  • 2
    @GünterZöchbauer but a service have no @ Component decorator, so if you want to inyect a service inside another service you are forced to include it in the bootstrap(), why it's possible to specify a provider in a @ component and all his children ; but not in a simple service parent.. with no @ Component decorator, just a simple class. Ex: mock.service.ts: import { Injectable } from '@angular/core'; import { HEROES } from './mock-heroes'; @Injectable() export class MockService { getHeroes() { return HEROES; } } – stackdave Aug 21 '16 at 05:38
  • I see. `@Component()` wasn't mentioned in the question, this is why I was wondering why it was mentioned at all in the answer. – Günter Zöchbauer Aug 21 '16 at 08:14
  • 1
    so there is no way to inject an service inside another, just do it like global service in Bootstrap. am I right @GünterZöchbauer ? – stackdave Aug 21 '16 at 08:22
  • Sure, injecting one service into another just works. Each service needs to be provided somewhere. – Günter Zöchbauer Aug 21 '16 at 09:14
  • 1
    @stackdave the centralization is indeed an issue. Did you find a solutiom? Bad ng design around this: You encapsulate things in modules only to find that they also must be declared globally, why should the main.ts be aware of my modules behaviour? if a service is injectable into a component, why can't ng2 discover the dependency tree and provide the service automatically with its dependents... – Yonatan Mar 26 '17 at 12:31
1

A providers array is available in @NgModule. You can provide your service by declaring your service in that array.

@NgModule({
    declarations:[...],
    imports:[...],
    providers: [MyCustomService],
    bootstrap:[AppComponent]
})
Fabrice Jumarie
  • 151
  • 7