Angular 2: No provider for (injected) service

Question

I have two services in my app - MainService and RightClickService. Only MainService is accessible globally in the application, and RightClickService is injected to MainService. Therefore, I defined the following files as:

app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [MainService],
  bootstrap: [AppComponent]
})
export class AppModule { }

RightClickService is not mentioned in app.module.ts.

service.ts

 @Injectable()
 export class MainService {

  constructor(private rightClickService: RightClickService) {
    console.log("Constructor is init");
  }
}

RightClickService exists only in one component named inside the big application RightClickComponent.

right-click.component.ts:

@Component({
  selector: 'right-click',
  template: `
    ...
  `,
  styleUrls: ['...'],
  providers: [RightClickService]
})
export class RightClickComponent implements OnInit {

  constructor(private rightClickService: RightClickService) {}

}

Still, I get the error:

EXCEPTION: No provider for RightClickService!

Do you know what I'm doing wrong?

`MainService` can't find provider for `RightClickService` because you don't provide it in NgModule — yurzui, Mar 28 '17 at 20:37
you are using `rightClickService` in `MainService` and in `RightClickComponent`. Probably the reason it is giving you an error — Matthew, Mar 28 '17 at 20:38
You cannot do that, your are saying inject this service from somewhere, I'll find out how to send you that service, that won't work. Just add `RightClickService` in your module, or remove your main service from there and provide both services on the component provider. — dlcardozo, Mar 28 '17 at 20:39
But I want to inject RightClickService to MainService. Of course that I'll use it both in MainService and in RightClickComponent. — CrazySynthax, Mar 28 '17 at 20:40
@CrazySynthax, your `MainService` will be created before, you have a race condition here, you cannot use the `MainService` because it depends of your `RightClickService`. — dlcardozo, Mar 28 '17 at 20:42

score 29 · Accepted Answer · edited Feb 26 '20 at 04:58

In addition to what already said, you must know two things:

Your app has only one root injector that contains all providers delcared in @NgModule.providers array of any module in your app including AppModule.
Each Component has its own injector (child injector of the root injector) that contains providers declared in @Component.providers array of the component.

when angular want to resolve dependencies (RightClickService) of a service (MainService) it looks for it in the root injector which contains providers of all NgModules.

When angular want to resolve dependencies (RightClickService) of a component (RightClickComponent) it looks for it in the component injector if not found it looks for it in the parent component injector if not found he will do the same until he reaches the root injector if not found an error will be thrown.

if you want to solve the problem you can do this :

function MainServiceFactory(RightClickService) {
    return new MainService(new RightClickService());
}

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [
   {
     provide: MainService,
     useFactory: MainServiceFactory,
     deps: [RightClickService]
   }
],
  bootstrap: [AppComponent]
})
export class AppModule { }

Thanks for the great explanation on this; I ran into a similar issue trying to inject one service into another (both of which had ModuleWithProviders configurations to account for), and this really clarified what was happening at a DI level and why the providers weren't being found and resolved correctly. — Skeeterdrums, May 15 '20 at 16:07

score 5 · Answer 2 · answered Mar 28 '17 at 21:32

I just pulled this into a Plunker, and unless I mistyped something ... what you have seems to work. So maybe there is something else wrong?

Can you check out the plunker here: https://plnkr.co/edit/ea9dFs?p=info

(The tool won't let me post without the code ... but you already have the code above ... so I'm just pasting a piece of it.)

import { Injectable } from '@angular/core'

 @Injectable()
 export class RightClickService {

  constructor() {
    console.log("RightClickService is init");
  }
}

Angular 2: No provider for (injected) service

2 Answers2

Linked