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?

Answer 1

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

1. Your app has only one root injector that contains all providers delcared in @NgModule.providers array of any module in your app including AppModule.

2. 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) he looks for it in the root injector which contains providers of all NgModules.

When angular want to resolve dependencies (RightClickService) of a component (RightClickComponent) he looks for it in the component injector if not found he 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 { }

Answer 2

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");
  }
}