Angular: Lifecycle Method Without implements

ID

javascript.angular_lifecycle_interface

Severity

low

Remediation Complexity

medium

Remediation Risk

low

Remediation Effort

medium

Resource

Code Smell

Language

JavaScript

Tags

angular, types

Description

Reports Angular component / directive / service classes that declare a lifecycle method (ngOnInit, ngOnDestroy, ngOnChanges, ngDoCheck, ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit, ngAfterViewChecked) without also listing the matching interface in implements. Implementing the interface lets the TypeScript compiler check the method signature, prevents typos in the method name, and signals intent to readers and IDEs.

Rationale

// Bad — typo `ngOnIniit` would silently never run.
class BadComponent {
  ngOnInit() {
    log("init");
  }
}

Without implements OnInit, a typo in the lifecycle method name produces a perfectly valid (but unused) method. With the interface, the compiler complains immediately.

Remediation

Add the interface to the class’s implements list:

// Good — every lifecycle method has its interface.
class GoodComponent implements OnInit, OnDestroy {
  ngOnInit() { log("init"); }
  ngOnDestroy() { log("destroy"); }
}

References