Ionic/Angularで高速なライブリロードを実現する標準手法

この記事はIonic Framework / Capacitor Advent Calendar 2020の記事です。

---

Ionic/Angularで作業をしてると、アプリが小さなうちは問題ないのですが、規模が大きくなってくると ionic serve の 変更検知 → リロード のインターバルが長くなりがちでしたが、それを大きく変えるHMR（Hot Module Reload）がAngular11で実装され、Ionic/Angularでも利用できるようになりました！

HMRライブリロードの方法

利用するには、まずAngular11へのアップデートが必要です。ターミナルで以下を実行します。

% ng update @angular/cli @angular/core
% npm install @ionic/angular-toolkit@latest

Ionicのバージョンは特にHMRする上で問題にならないはずですが、私は @ionic/angular@5.4.5 で確認しています。そしてアップデートが完了したら、以下を実行します。

% ionic serve -- --hmr

これでHMRが有効な状態でServeができます。試しに配色を変更してみましょう。まずHTMLテンプレートを変更してみます。BLANKテンプレートの ion-toolbar に color 属性を追加してみます。左がエディタ、右がブラウザです。

リロードが走らず、変更されています。次にテーマカラーを変更してみましょう。

この場合、リロードが走らず高速に実行してくれます。ただ、PUSH遷移で移動していたり、Modalを表示している場合ではリロードが走るようなので、「すべての場合でリロードが走らず実行してくれる」わけではありませんが、今までの数倍の生産性を生み出してくれるでしょう。

もっと細かく設定する方法

ionic serve -- --hmr のコマンドですが、Ionic CLIでAngular CLIをラップしてるだけですので、実際に実行されてるコマンドは以下になります。

% ng run app:serve --host=localhost --port=8100 --hmr

なので、細かいハンドリングが必要な場合は、 ng コマンドを実行した方が楽かもしれません。ぜひAngular CLIの取り組みも追ってみてください。

それではまた。