14

Angular 6 now has injectable providers which is the new recommended way of injecting services, and it works really well except I'm having a problem when using a service which extends another service. So as an example, suppose I have

@Injectable({
  providedIn: 'root'
})
export class ParentAppService { ... }

@Injectable({
  providedIn: 'root'
})
export class ChildAppService extends ParentAppService { ... }

The problem is that no matter what I ask for in a component, the parent class is always injected.

So if you ask for

constructor(private childAppService: ChildAppService) { ... }

you will still be provided an instance of ParentAppService, which isn't expected.

A very simple workaround would be to just register the providers in your module the old fashioned way, and this works:

@NgModule({
 providers: [AppService, ChildAppService]
})

But that's basically the old way of doing things, and doesn't have the benefits of better tree-shaking and cleaner testing like the new providedIn registration process.

So my question is, what's the right way to do this? Is there a better way to register a provider so I can get the desired behavior (maybe specifying a provider token somehow?).

I've setup a super simple stackblitz example to show what's going on.

https://stackblitz.com/edit/angular-lacyab?file=src%2Fapp%2Fapp.component.ts

You'll notice it says "Hello I AM APP SERVICE!" even though the component asked to be provided the child service. If in the app module we register the providers the old way (see the commented out code), all of a sudden the proper provider gets injected.

Thanks for your help!

1
  • 1
    Use composition instead of inheritance?
    – Trash Can
    Commented May 10, 2018 at 0:32

1 Answer 1

10

Update:

There is already a pull request for that https://github.com/angular/angular/pull/25033

Original version

The problem: seems new angular treeshakable services don't respect inheritance:

enter image description here

First angular defines(1) ngInjectableDef property on AppService function. Then you inherit ChilAppService from AppService so that child class contains all properties from parent class. And finally when angular tries to define(2) ngInjectableDef property on ChildAppService it can't because it already exists(3) thanks to javascript prototypical inheritance.

enter image description here

In order to fix it you can either

1) workaround it through defining undefined ngInjectableDef property on child service so that it won't read already filled from parent class property and angular will be able to define ngInjectableDef on child class:

@Injectable({
  providedIn: 'root'
})
export class ChildAppService extends AppService {
  static ngInjectableDef = undefined;
  constructor() {
    super();
    this.name = 'CHILD SERVICE';
  }
}

Forked stackblitz

2) or report issue in github

3) or use composition instead of inheritance as was suggested in comments.

1
  • This is not working for me, I am able to inherit from one service. But with another similar service I am getting TypeError: undefined is not an object
    – umunBeing
    Commented Nov 3, 2022 at 7:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.