Angular 2: No provider for (injected) service

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

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