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
– yurzui, Commented Mar 28, 2017 at 20:37
@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
– dlcardozo, Commented Mar 28, 2017 at 20:42

Community · Accepted Answer · 2020-02-26 04:58:38Z

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.

DeborahK · Accepted Answer · 2017-03-28 21:32:00Z

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

Collectives™ on Stack Overflow

Angular 2: No provider for (injected) service

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related