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.

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) 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 { }