1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2022-08-04

Angular9から13まで移行したことによってリンターも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にアップする予定があるので…

さいごに

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

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

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?