Angular 2+ Component extends Component fine, but tslint complaining on inherited lifecycle hooks

Question

I have an abstract Base Component that cleans subscriptions with oneself:

import { OnDestroy, OnInit } from '@angular/core';
import { Subject } from 'rxjs/Subject';

export abstract class NeatComponent implements OnDestroy, OnInit {
// Add '.takeUntil(this.ngUnsubscribe)' before every '.subscrybe(...)'
// and this subscriptions will be cleaned up on component destroy.

  protected ngUnsubscribe: Subject<any> = new Subject();

  public ngOnDestroy() {
    this.ngUnsubscribe.next();
    this.ngUnsubscribe.complete();
  }

  public ngOnInit(){}
}

Now I creating working component:

export class CategorySelectorComponent extends NeatComponent {

    public constructor() { super(); }
    
    public ngOnInit() {
      // some code
    }
}

All works fine, but tsLint not likes my ngOnInit method:

[tslint] Implement lifecycle hook interface OnInit for method ngOnInit in class CategorySelectorComponent (use-life-cycle-interface)

Samala

I also have the issue, it's really annoying that codelyzer can't pick up the inheritance. – Villa

Answer 1

I think you can override this by making

From :

"use-life-cycle-interface": true,

to :

"use-life-cycle-interface": false,

For more detail of test cases , Check this out

Weis

Thanks! That was easy and helpefull ) – Samala

Answer 2

I had the same error with a component without heritage, and I correct it adding implement OnDestroy.

Spiv

The correct answer, I think. – Loveland