🐈
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しなくてもよいらしい？
とりあえず動く＆コンパイルもリントエラーも通ったので、シンプルなクラスに変えて対応した。
- export class MessagesComponent implements OnInit {
+ export class MessagesComponent {
public title: string = '';
constructor(public messageService: MessageService) {}
- ngOnInit(): void {}
}
参考
追記
この辺の記事読んだ感じ、「使うライフサイクルメソッドがある場合にimplementsしよう」がユースケースっぽいのかな。
であれば使わないライフサイクルメソッドは消してしまうでよさそうな気はする。
Discussion