はじめに

Angularのアプリを開発されている方は一度は以下のエラーに直面したことがあるのではないでしょうか。

青い四角で囲まれているところを見ると、 ChunkLoadError: Loading chunk 14 failed. と表示されています。

このエラーメッセージがいわゆる Chunkエラー です。
もし今までにこのエラーメッセージを見たことがあり、対応に困っているなどあれば参考になるかもしれません。

Chunkエラーとは何か、なぜ起きるのか

Angularの公式ドキュメントにわかりやすい説明があったので引いてきました。

このファイルの整合性は、遅延読み込みモジュールの場合に特に重要です。JSバンドルは多くの遅延チャンクを参照しますが、遅延チャンクのファイル名は、アプリケーションの特定のビルドに固有のものです。実行中のバージョンXのアプリケーションは遅延チャンクを読み込もうとしますが、サーバーではバージョンX+1にすでに更新されている場合、遅延読み込み操作は失敗します。

上記の内容をざっくり図にしてみました。
図内では、バージョンAのアプリでサーバーのバージョンBの遅延チャンクを読み込もうとしてエラーになる図です。
基本的にChunkエラーはアプリの再起動やブラウザのリロードで解消することが可能です。

対処法

Chunkエラーの概要がわかったところで、じゃあどうすれば良いのかを考えてみます。
上で挙げてますが、アプリの再起動(リロード)をすれば解決します。

こちらのサイトを参考にすると、リロードのアプローチをかけるためにグローバルにHookできるハンドラを用意しています。

  handleError(error: any): void {
   const chunkFailedMessage = /Loading chunk [\d]+ failed/;

    if (chunkFailedMessage.test(err.message)) {
      window.location.reload();
    }
  }

試した感じだと、chunkFailedMessageは一律コピペでよく、その後の対応はアプリケーション次第になるかと思います。(上記の例だとブラウザのリロードをかけているようですね。)

終わりに

以上がざっくりとしたChunkエラーの説明と対処法になります。
初めはこのエラーは何が起こっているんだと戸惑いますが、どういう経緯で発生しているかが理解できると対応も検討しやすいですね。

ではまた。

参考

Angular公式ドキュメント
Angular Lazy Routes & loading chunk failed