Base-Components with @Injectable()

To be honest I’m not pretty sure if this is a bug or a support request, but looking for an answer via stackoverflow https://stackoverflow.com/questions/60116361/angular-9-basecomponent-with-injectable?noredirect=1#comment106328351_60116361 didn’t gave me a reliable answer.

In the latest version of Angular8 base components (classes my components inherit from) needed to be Injectable. So I put an “@Injectable()” to all my base components. With Angular 9 the compiler now says:

The component YourComponent inherits its constructor from BaseComponent, but the latter does not have an Angular decorator of its own. Dependency injection will not be able to resolve the parameters of BaseComponent’s constructor. Either add a @Directive decorator to BaseComponent, or add an explicit constructor to RoleSelectDialogComponent.

The problem occurs if a component without a specific constructor inherits from a BaseComponent with constructor. Right now the problem can be fixed by replacing “@Injectible” either by “@Directive()” or “@Component({selector:‘dummy’,template:‘no-ui’})” but both seam pretty hacky - it is neither a directive nor a component. Shouldn’t “@Injectable” still suite this issue?

🔬 Minimal Reproduction

export abstract class BaseComponent implements OnInit, OnDestroy, AfterViewInit {
    constructor(
        private _baseComponentDependencyProvider: BaseComponentDependencyProvider
    ) { ...}
}

@Component({ ... })
export class MyComponent extends BaseComponent {}

🔥 Exception or Error

The component YourComponent inherits its constructor from BaseComponent, but the latter does not have an Angular decorator of its own. Dependency injection will not be able to resolve the parameters of BaseComponent's constructor. Either add a @Directive decorator to BaseComponent, or add an explicit constructor to RoleSelectDialogComponent.

🌍 Your Environment

Angular Version:

Angular CLI: 9.0.1
Node: 10.15.0
OS: win32 x64

[ghost]

But that sounds a bit hacky for me, since it is neither a Directive nor a Component (just a base-class that could get used by both)? And there is no best pratice for components on the linked website https://angular.io/guide/ivy-compatibility-examples#undecorated-classes.

The latest version of Angular 8 had the same behavior to force people to code icy-compatible code. But there was an @Injectable() possible. Anyway - just go with @Directive() and don’t ask?

Edit: regarding the “Background” of this article an “@Injectable()” on the base class should still do the trick - but doesn’t?

[JoostK]

Small correction to Pawel’s answer: you’d need to add an @Directive() decorator, not @Component() as a template is required for components.