Angular９から１３まで移行したことによってリンターもTSLintからESLintへ移行したが、
ng lintを叩くとエラーを吐いて辛い思いをした…

問題があった場所と対処

まずエラーが出たのは下のエラーメッセージ

An unhandled exception occurred: Failed to load parser '@angular-eslint/template-parser' declared in

これはeslintrc.jsonにparserの記載がないと解釈して.eslintrc.jsonに以下を追加

.eslintrc.json

{
  "files": ["*.component.html"],
  "parser": "@angular-eslint/template-parser",
  "parserOptions": {
    "project": "./tsconfig.app.json",
    "ecmaVersion": 2020,
    "sourceType": "module"
  },
  "rules": {},
  "plugins": ["@angular-eslint/template"]
}

細かい設定は後回しにしてとりあえずng lint試すも同じエラー…
もしかして、コンバイルかどこかがだめ？とおもい、一旦package.jsonを確認。

package.json

"@angular-devkit/build-angular": "^13.3.9",
"@angular-eslint/builder": "1.2.0",
"@angular-eslint/eslint-plugin": "1.2.0",
"@angular-eslint/eslint-plugin-template": "1.2.0",
"@angular-eslint/schematics": "^14.0.2",
"@angular-eslint/template-parser": "1.2.0",
"@angular/cli": "~13.3.9",

@angular-eslint/builderを始め1.2.0のバージョンに問題がありそう
と思てアップデートしようとすると

ERR! stack Error: Can't find Python executable "python",(詳細はコピペミスりました）

と出てPythonが必要なの？と疑問にも思いながらも、Dockerfileに下記を追加

RUN apk add py3-pip make g++

ここまでやってやっとアップデートも正常に稼働

CC(target) Release/obj.target/nothing/../../node-addon-api/nothing.o
  AR(target) Release/obj.target/../../node-addon-api/nothing.a
  COPY Release/nothing.a
  CXX(target) Release/obj.target/watcher/src/binding.o
  CXX(target) Release/obj.target/watcher/src/Watcher.o
  CXX(target) Release/obj.target/watcher/src/Backend.o
  CXX(target) Release/obj.target/watcher/src/DirTree.o
  CXX(target) Release/obj.target/watcher/src/watchman/BSER.o
  CXX(target) Release/obj.target/watcher/src/watchman/WatchmanBackend.o
  CXX(target) Release/obj.target/watcher/src/shared/BruteForceBackend.o
  CXX(target) Release/obj.target/watcher/src/linux/InotifyBackend.o
  CXX(target) Release/obj.target/watcher/src/unix/legacy.o
  SOLINK_MODULE(target) Release/obj.target/watcher.node
  COPY Release/watcher.node

packege.jsonもいい感じに

packege.json

 "devDependencies": {
    "@angular-devkit/build-angular": "^13.3.9",
    "@angular-eslint/builder": "13.5.0",
    "@angular-eslint/eslint-plugin": "13.5.0",
    "@angular-eslint/eslint-plugin-template": "13.5.0",
    "@angular-eslint/schematics": "^14.0.2",
    "@angular-eslint/template-parser": "13.5.0",
    "@angular/cli": "~13.3.9",

@angular-eslint/schematicsだけ14なのが気になるけど一旦はよしとします。
Angular自体14にアップする予定があるので…

さいごに

とりあえず、自分が忘れないように色々書き殴りましたが、読みづらかったらごめんなさい。
あと、残そうと思ったのは問題解決してからなので色々書けてる部分もあり…
今後体験していくことは残す前提で色々残そうと反省しております。

間違い等ございましたら、ぜひご指摘ください。

Angular9から13へ移行してESLintの構築がうまくいかなかった

問題があった場所と対処

さいごに