Angular4 Components inheritance with abstract class

Update for Angular 10+

As of Angular 10, when using the IVY compiler, components that are inherited, and which contain Angular functionality, must be decorated with an empty @Directive() decorator.

Read more about it here

---

There's no need to add @Component() annotations to abstract classes or register them to any module.

It could be that there's something wrong within your code that does not conform to what Angular expects.

I created a demo application using Angular CLI 1.2.7 with the ng new <name> command and extend the AppComponent class as below.

base.component.ts

import { HostListener } from '@angular/core';

export abstract class BaseComponent {
    @HostListener('click')
    onClick() {
        alert('Click');
    }
}

and

app.component.ts

import { Component } from '@angular/core';
import { BaseComponent } from './base.component';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
})
export class AppComponent extends BaseComponent {
    title = 'app';
}

The app.module class was not changed in any way.

The click handler located in the base component worked without any problems. A AOT compilation using ng build --prod also did not give any errors.

This demo was using angular v5.1.1