Angular 2: No provider for (injected) service : <p>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: </p>

<p><strong>app.module.ts</strong></p>

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

<p>RightClickService is not mentioned in app.module.ts.</p>

<p><strong>service.ts</strong></p>

<pre><code> @Injectable()
 export class MainService {

  constructor(private rightClickService: RightClickService) {
    console.log("Constructor is init");
  }
}
</code></pre>

<p>RightClickService exists only in one component named inside the big application RightClickComponent. </p>

<p><strong>right-click.component.ts:</strong></p>

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

  constructor(private rightClickService: RightClickService) {}

}
</code></pre>

<p>Still, I get the error:</p>

<pre><code>EXCEPTION: No provider for RightClickService!
</code></pre>

<p>Do you know what I'm doing wrong? </p>
