This rule raises an issue when an Angular class defines lifecycle methods without implementing the corresponding lifecycle interfaces.

Why is this an issue?

Angular provides lifecycle interfaces like OnInit, OnDestroy, and DoBootstrap that correspond to lifecycle methods such as ngOnInit(), ngOnDestroy(), and ngDoBootstrap().

When a class implements lifecycle methods without the corresponding interfaces, several problems arise:

• Type safety is reduced: TypeScript cannot verify that the method signature matches the expected interface
• IDE support is limited: Code completion and refactoring tools work less effectively
• Code clarity suffers: Other developers cannot easily see which lifecycle hooks the class uses
• Angular style guide violations: The official Angular style guide recommends implementing lifecycle interfaces

The Angular compiler and runtime will still work without the interfaces, but the code becomes less maintainable and more error-prone.

What is the potential impact?

Without lifecycle interfaces, developers may accidentally implement lifecycle methods with incorrect signatures, leading to runtime issues where the methods are not called as expected. This can cause initialization logic to fail silently or cleanup code to not execute properly.

How to fix in Angular?

Import and implement the corresponding lifecycle interface for each lifecycle method in your class.

Non-compliant code example

@Component()
class MyComponent {
  ngOnInit() { // Noncompliant
    console.log('Component initialized');
  }

  ngOnDestroy() { // Noncompliant
    console.log('Component destroyed');
  }
}

Compliant code example

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

@Component()
class MyComponent implements OnInit, OnDestroy {
  ngOnInit() {
    console.log('Component initialized');
  }

  ngOnDestroy() {
    console.log('Component destroyed');
  }
}

When extending a base class that already implements the interface, use the override keyword instead of implementing the interface again.

Non-compliant code example

@Component()
class BaseComponent implements OnInit {
  ngOnInit() {
    console.log('Base initialization');
  }
}

@Component()
class DerivedComponent extends BaseComponent {
  ngOnInit() { // Noncompliant
    super.ngOnInit();
    console.log('Derived initialization');
  }
}

Compliant code example

@Component()
class BaseComponent implements OnInit {
  ngOnInit() {
    console.log('Base initialization');
  }
}

@Component()
class DerivedComponent extends BaseComponent {
  override ngOnInit() {
    super.ngOnInit();
    console.log('Derived initialization');
  }
}

Documentation

• Angular ESLint - Rule use-lifecycle-interface
• Angular Lifecycle Hooks - Official Angular documentation on lifecycle hooks and interfaces
• Angular Style Guide - Lifecycle Interfaces - Angular style guide recommendation for implementing lifecycle interfaces