Angular, register abstract component to app declarations

Question

I have an abstract parent component,

@Component({
  selector: 'app-base-data-table',
  templateUrl: './base-data-table.component.html'
})
export abstract class BaseDataTableComponent<IDataService> {
    protected dataService: IDataService;
}

and a child component

@Component({
  selector: 'app-specific-table',
  template: '<app-base-data-table></app-base-data-table> <!-- and other things -->',
})
export class SpecificDataTableComponent extends BaseDataTableComponent<SpecificService> {
}

To do so, I have to declare in the app.module.ts the BaseDataTableComponent inside its declarations, but since it's templated I get the error

Type 'typeof BaseDataTableComponent' is not assignable to type 'any[] | Type<any>'.
  Type 'typeof BaseDataTableComponent' is not assignable to type 'Type<any>'.
    Cannot assign an abstract constructor type to a non-abstract constructor type.

How can I use directly the selector of an abstract component? Otherwise, how can I load the parent component's template without redefining the child templateUrl to point to the parent's?

Answer 1

According to the source code (Angular 8.2.x), the type Type<T> is used for classes that are instantiatable.

export interface Type<T> extends Function { new (...args: any[]): T; }

An abstract class can't be instantiated on its own , so I think that's why you're getting that error. As a result, decorating an abstract class using @Component is redundant.

Here's my approach:

base-data-table.ts

export abstract class BaseDataTableComponent {
  constructor (protected dataService: DataService) { }
}

concrete-data-table.component.ts

@Component({
  selector: 'app-specific-table',
  template: '',
})
export class SpecificDataTableComponent extends BaseDataTableComponent {
  constructor (protected dataService: DataService) {
   super(dataService);
 }
}

The DI framework will ignore the constructor of the abstract class as it is not declared anywhere , but this can't stop you from injecting dependencies from the subclasses by using super(dep1, dep2, ...) .

IMO, this pattern can be used to share logic that is not directly related to the view. Yes, this logic composes some elements from the view, but it's not the same thing as using a sharable dumb component.