Angular 9 decorators on abstract base class

Question

I'm working on upgrading my project from Angular 8 to 9, and I've come across a problem with new requirements when extending classes.

According to Angular's documentation:

Undecorated base classes using Angular features

As of version 9, it's deprecated to have an undecorated base class that:

• uses Angular features
• is extended by a directive or component

Angular lifecycle hooks or any of the following Angular field decorators are considered Angular features:

• @Input()
• @Output()
• @HostBinding()
• @HostListener()
• @ViewChild() / @ViewChildren()
• @ContentChild() / @ContentChildren()

For @Component decorators, it requires a template or templateURL on the base class. Adding either causes the child class to not render it's template.

For example, the following result in nothing rendering on the view:

@Component({
  template: ''
})
export abstract class BaseComponent<T extends AbstractSuperEntity> extends Toggler implements OnChanges {
  @Input()
  year: number | string

  constructor(service: MyService) {

  }

  ngOnChanges() {
  }
}

@Component({
  templateUrl: 'my.component.html',
  selector: 'my-component'
})
export class MyComponent extends BaseComponent<AbstractSuperEntity> {

  constructor(service: MyService) {
    super(service);
  }

}

I tried changing the base class to use templateUrl pointing to an empty html, but that doesn't work either.

Answer 1

You have to add an empty @Directive() decorator. As far as I know, that should be enough:

@Directive()
export abstract class BaseComponent<T extends AbstractSuperEntity> extends Toggler implements OnChanges {
  @Input()
  year: number | string

  constructor(service: MyService) {

  }

  ngOnChanges() {
  }
}