I am trying to do component inheritance in Angular 17 and cannot figure why its giving me an error. Here is my code structure:

export class ParentComponent { 
   constructor(public httpService: myCustomHttpService) 
  {
  }
}


export class ChildComponent extends ParentComponent {
  constructor() {
    super(httpService);
 }
}

I get an error "Cannot find name 'httpService'. Did you mean the instance member 'this.httpService'?". Then if I add this.httpService to super(). I get an error "'super' must be called before accessing 'this' in the constructor of a derived class."

What am I missing?

I am trying to do component inheritance in Angular 17 and cannot figure why its giving me an error. Here is my code structure:

export class ParentComponent { 
   constructor(public httpService: myCustomHttpService) 
  {
  }
}


export class ChildComponent extends ParentComponent {
  constructor() {
    super(httpService);
 }
}

I get an error "Cannot find name 'httpService'. Did you mean the instance member 'this.httpService'?". Then if I add this.httpService to super(). I get an error "'super' must be called before accessing 'this' in the constructor of a derived class."

What am I missing?

• angular
• typescript
• spartacus-storefront
• angular17

• constructors should be the same – Iłya Bursov Commented Mar 30 at 17:21
• @IłyaBursov I guess I have to use the super() class? Don't I? – Yogesh Commented Mar 30 at 17:29
• you need to pass parameter to parent constructor, this is why child constructor should accept it – Iłya Bursov Commented Mar 30 at 17:30

3 Answers 3

export class ParentComponent {
    public httpService = inject(myCustomHttpService);
}

export class ChildComponent extends ParentComponent {
    // No need to inject again — inherits httpService
}

There are a few points to note:

a. accessing fields inside a method

Note that inside a method body, it is still mandatory to access fields and other methods via this.. An unqualified name in a method body will always refer to something in the enclosing scope: This rule is equally applicable to constructor functions as well. This has been documented here, Methods

The code below throws the error Cannot find name 'httpService since it tries to resolve the variable httpService from the enclosing scope, however it fails to do so.

export class ChildComponent extends ParentComponent {
  constructor() {
    super(httpService);
 }
}

b. Super calls

It is required to call super() in the constructor body before using any this. members. This is the reason for the error 'super' must be called before accessing 'this' in the constructor of a derived class. This is documented here, Super calls.

Solution

Parameterise the constructor and pass the argument from the class site as shown below. Please note there is no need to create a parameter property httpService in the child class. The same can be a normal parameter as the below code shows.

export class ChildComponent extends ParentComponent {
  constructor(httpService: myCustomHttpService) {
    super(httpService);
 }
}

// a call site
    
const check = new ChildComponent(new myCustomHttpService())

Citation:

The constructor parameters in the base class can be typed by referring to the constructor function as well. This has been shown in the q/a Most efficient way to pass parameters to the super class in TypeScript

Without inject:

First inject the injectable you need in the format private httpService: HttpService (Make sure you import HttpService), then pass it inside super as an argument.

export class ChildComponent extends ParentComponent {

  constructor(protected httpService: HttpService) {
    super(httpService);
  }
}

With inject:

In angular 17 you have inject, no more messy component inheritance problems.

Just add override to the child properties that are also inherited.

Parent:

export class ParentComponent { 
  protected httpService = inject(myCustomHttpService);
   
  constructor() { }
}

Child:

export class ChildComponent extends ParentComponent {
  protected override httpService = inject(myCustomHttpService);

  constructor() { }
}