Angularのバージョンアップを検討

3年前に作った個人用のWebアプリを久しぶりに改修しようかと思い、その前にAngularのバージョンをあげようかなと検討している。

2年前に一度バージョンアップしており、現状はAngular 4.0.1を使用。調べてみると2020/02にAngular 9がリリースされていた。ここまでバージョンが違うと大変そう。

使用ライブラリの状況

• ng2-admin
  • 今は 1.0.0 (Angular 4) を使用中
  • 最新は 4.0.1 (Angular 8) で、いつからか ngx-admin に名前が変わっている
  • UI ライブラリも自社製の Nebular というライブラリに置換済み
  • 2.2.0 以降 Angular 6+ をサポート
  • https://github.com/akveo/ngx-admin
  • tag v.1.0.0 は ng2-admin だが mater は ngx-admin に変わっている
  • tag v.2.0.0 の README.md を見ると「Unfortunately, there is no way to update from ng2-admin to ngx-admin」とのこと…
  • https://akveo.github.io/ngx-admin/
  • GitHub Star が 20k !
• ng-lightning
  • 今は 1.3.0 (Angular のサポートVer.不明) を使用中
  • 最新は 5.0.0 (Angular 9 サポート)
  • https://github.com/ng-lightning/ng-lightning
  • https://ng-lightning.github.io/ng-lightning/#/
  • 開発当時は ng2-admin の UI があまり好きではなかったので、わざわざ使ったが、Nebular に置き換えてもいいかも
  • GitHub Star が 814 …
• DevExtreme
  • 17.2.7 (Angular v2.4.x – v5.0.x) を使用中
  • 最新は 19.2.6 (Angular v6.0.x – v9.0.x)
  • https://github.com/DevExpress/devextreme-angular
  • https://js.devexpress.com/Documentation/Guide/Angular_Components/DevExtreme_Angular_Components/
  • https://js.devexpress.com/Documentation/Guide/Angular_Components/Version_History/

移行戦略

案

• 各種ライブラリのバージョンを上げる案
  • 4→9
    • ng2-adminを最新に
    • ng-lightningを最新に
    • DevExtremeを最新に
    • コンパイルエラーに対応していく
• ライブラリのバージョンをできるだけ上げずにどこまでいけるか試す案
  • 4→5、5→6、6→9
    • @angular/http の import は自分が書いた6クラスのみなので対応できそう
    • ng2-admin で用意されていたと思われる .angular-cli.json を自分で angular.json への書き換えるのは悪手か
      • 記述量は知れているのでdiff見ながらやってもいいかも

参考になったサイト

• Angular 4→8対応にて学んだAngularでのバージョン追従作法
  • https://speakerdeck.com/okunokentaro/classi-angular-night-4?slide=32
  • 4→5、5→6、6→8 と進めるのがよさそう
  • 4→5 は HttpClient への移行が鬼門
  • 5→6 は .angular-cli.json から angular.json への移行と RxJS の .pipe() への置換
  • 6→8 はコマンド一発でやってくれるみたい
• Angularでの開発を快適に進めるために知っておきたいこと（Angular推し）
  • https://qiita.com/okunokentaro/items/503ab7a4c7601b564de0
  • https://gist.github.com/okunokentaro/dc4cd470999fd90aba73423d09a37485
  • Angular はもうやめようかなと思っていたが、これを読んでもう一度使ってみようという気になった
• Web フロントエンドフレームワーク選定前に知っておくべき Angular の 6 つの問題点と、それでも Angular を選ぶ理由（Angular反対派）
  • https://qiita.com/luncheon/items/9dde71269335d0057844
• Angular Update Guide
  • https://update.angular.io/
  • 移行元と移行先のバージョンを入れると、コード修正が必要なポイントを列挙してくれる
• Angular v2からv6までの変化をまとめてみた
  • https://lacolaco.hatenablog.com/entry/2018/05/08/113211
  • 主要な変更がどのバージョンで入ったかを確認するのに便利
• 3rd party ライブラリの一覧
  • https://angular.io/resources?category=development
  • 一応 ng-lightning も残っているなぁ
  • DevExtreme も追加されていた