Angularで`ngOnInit`に対する` Lifecycle methods should not be empty `の解決案

環境

    "@angular/common": "^14.0.0",
    "@angular/compiler": "^14.0.0",
    "@angular/core": "^14.0.0",
    "@angular/router": "^14.0.0",
    "@angular-eslint/builder": "14.0.2",
    "@angular-eslint/eslint-plugin": "14.0.2",
    "@angular-eslint/eslint-plugin-template": "14.0.2",
    "@angular-eslint/schematics": "14.0.2",
    "@angular-eslint/template-parser": "14.0.2",
    "@angular/cli": "~14.0.6",
    "@angular/compiler-cli": "^14.0.0",
    "eslint": "^8.18.0",
    ...

前提

Angular CLIでコンポーネントを作成する。

$ ng g c message

発生したエラーメッセージ

ng lintを実行すると、以下のメッセージが出るようになった。

  13:3  error  Lifecycle methods should not be empty  @angular-eslint/no-empty-lifecycle-method

✖ 1 problem (1 error, 0 warnings)

Lint errors found in the listed files.

「空のライフサイクルメソッドを作るな」と理解したので、ngOnInitを消してみたところ、コンパイルエラーが発生した。

9 export class MessagesComponent implements OnInit {
               ~~~~~~~~~~~~~~~~~

  node_modules/@angular/core/index.d.ts:5469:5
    5469     ngOnInit(): void;
             ~~~~~~~~~~~~~~~~~
    'ngOnInit' is declared here.

対応

ngOnInitを使わないなら、OnInitをimplementsしなくてもよいらしい？

https://github.com/akunzai/angular-boilerplate/pull/144/files

とりあえず動く＆コンパイルもリントエラーも通ったので、シンプルなクラスに変えて対応した。

- export class MessagesComponent implements OnInit {
+ export class MessagesComponent {
  public title: string = '';
  constructor(public messageService: MessageService) {}
-  ngOnInit(): void {}
}

参考

https://github.com/angular-eslint/angular-eslint/issues/282

https://github.com/akunzai/angular-boilerplate/pull/144/files

追記

この辺の記事読んだ感じ、「使うライフサイクルメソッドがある場合にimplementsしよう」がユースケースっぽいのかな。
であれば使わないライフサイクルメソッドは消してしまうでよさそうな気はする。

https://zenn.dev/rdlabo/articles/61822edac67d0e