No provider for BaseService class

Question

I have project on the Angular 6. Some of my services extend base classes. Base classes are regular TypeScript classes without the @Injectable decorator. When I try to run the app I'm getting the error:

NullInjectorError: No provider for HttpCommonService!

Wild guess - maybe it related to the DI somehow (since I extend some components from the another base classes without the @Component decorator and it works perfectly), but, even in the DI case, I'm not creating the new base class instance apart from the extended service class.

What is the problem or, at least, where should I search for the problem?

Examples

This is the base class:

export class HttpCommonService {
  constructor(protected http: HttpClient) {}

  /* Methods here */
}

This is the service that injected to the app root

@Injectable({ providedIn: 'root' })

export class HttpService extends HttpCommonService {
  constructor(protected http: HttpClient) {
    super(http);
  }

  /* Methods here */
}

Have you tried using the old way of Injecting services ? By declaring the service in app module under providers section. Also did you used the right import ? import {Injectable} from '@angular/core'; — Adrian Claudiu Dima, Jun 08 '18 at 08:21
Yes, import is correct. Tried to use the old way to add service into the app module (no implemented lazy loading at this moment), everything is the same — WeekendMan, Jun 08 '18 at 08:33
It's working fine, it could be because of your application structure. Here you can check https://stackblitz.com/edit/angular-no-provider-for-baseservice — Anshuman Jaiswal, Jun 08 '18 at 09:44
Please read [Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers?](//meta.stackoverflow.com/q/326569) - the summary is that this is not an ideal way to address volunteers, and is probably counterproductive to obtaining answers. Please refrain from adding this to your questions. — halfer, Jun 09 '18 at 21:50

score 0 · Answer 1 · answered Aug 06 '18 at 12:16

It looks like this is a bug with Angular - it currently has an open status: ProvidedIn Annotation Not Compatible With Deriving Classes

I had the same issue with services that had base classes that were also injectable services. You could try the work around suggested in the linked bug:

To get around this issue, in any deriving classes we have to set ngInjectableDef to undefined. This in turn, invokes the providedIn logic to create a factory for us

Or you could declare the service the ol' fashioned way and set the service type in the providers section of the NgModule decorator:

    @NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule
  ],
  providers: [HttpService],
  bootstrap: [AppComponent]
})
export class AppModule { }

I know that this is not the preferred way of doing things in Angular 6 but it is still supported and would work around your issue.

And I can see that you have already tried this. However this should definitely work as this is how my service was configured before I upgraded to Angular 6 from 5. Which may suggest that you missed some configuration. Did you remember to remove the providedIn option from the Injectable decorator?

No provider for BaseService class

Examples

1 Answers1