Angular v12 の HMR が LazyLoad に非対応で、ページ全体が読み込まれる件

Angular v11 から HMR（Hot Module Replacement） が利用できるようになった。

• Version 11 of Angular Now Available | by Mark Techson | Angular Blog

ng serve --hmr とフラッグをつけるだけなので、設定が非常に簡単。 環境ごとに区別したい場合は、npm script を用意したり、新しい環境を用意すればいい。

しかし、Lazy load を利用している場合、アプリケーション全体が再起動してしまう。

Lazy loaded code triggers the whole app reinitialization

（Lazy load したコードはアプリケーション全体の再起動を引き起こす）

Watch Out When Using HMR With Angular | by Colton | The Crazy Coder | Medium

ほとんどの大規模アプリケーションでは、パフォーマンス向上のために Lazyload を利用していると思うので、これはちょっと辛い…。

どうやら、Lazyload 対応を自前で実装しているケースもあるっぽい。

• wags1999/angular-hmr-lazy-components: This example shows how Angular HMR can be used to automatically reload lazy routes and lazy (dynamically-loaded) components. This can be extremely helpful for large Angular apps that take a while to JIT compile when they reload.

が、コードを見るとちょっと複雑なことをしていそう。

個人的な結論としては、いったん HMR は見送ることにしました。