1. ホーム
  2. アンギュラー

[解決済み] angular-cliの--output-hashingは、常に遅延ロードされたモジュールで動作することになっていますか?

2022-03-04 13:38:54

質問

angular-cli の --output-hashing オプションを all を使用して、ユーザーが最新のチャンク/アップデートを取得することを保証します。これは、遅延ロードされたモジュールでは常に機能するわけではないことに気づきました。

を変更した場合 のみ を遅延ロードされたモジュールに適用し、ビルドし、IIS にデプロイし、遅延ロードされたモジュールに属する URL にアクセスすると、期待通りに最新の変更を取得することができます。

しかし、ブラウザを閉じて開き直し、遅延ロードされたモジュールに属さないURLに移動し、遅延ロードされたモジュールに移動するリンクにクリックすると、最新の変更が観測されません。

まるで、変更されていないモジュールからアプリに入ったときに、ブラウザが何も変更されていないと思い込んでしまい、後から変更されたモジュールにアクセスしても、新しいチャンクを拾わないのです。 が変更されました。

さらに不思議なことに、この問題を再現してスクリーンショットを提供しようとしたところ、この問題は解消されました。

出力ハッシュを使用したキャッシュバスターで不整合を経験された方はいらっしゃいますか?

編集する

もう少し調査したところ、私のサイトのランディングページ[IPアドレス]:[ポート]にアクセスすると、index.htmlがキャッシュから来ることが判明しました。

その代わり、他のルート [IP address]:[port]/[route] に行くと、index.html はサーバーから来る。

index.html は inline.(hash).bundle.js を指し、その代わりに遅延ロードされたモジュールを指すので、 index.html の古いコピーを取得すると inline.js や他のモジュールの古いバージョンを取得することになります。

を追加してみました。 <meta http-equiv="expires" content="0" /> をindex.htmlに追加し、ブラウザのキャッシュをクリアしても、キャッシュからファイルが取得されました。

また、web.configにセクションを追加してみましたが、これもうまくいきませんでした。

index.htmlが常にサーバーから来るようにするにはどうしたらいいですか?

解決方法は?

あなたの答えは、このSO関連の質問で見つけることができます。 index.html ファイルを作成します。 IISを介して提供される単一ページアプリケーションのHTMLファイルのキャッシュを無効にする方法は?

さらに Mozilla Docs を設定する必要があります。 Cache-Control ヘッダはこのようになっています。 no-cache, no-store, must-revalidate

この問題の原因として、Angularが出力バンドルを生成するとき、出力ハッシュを使うように言われた場合、そのファイルの現在のバージョンを一意に識別するJSファイル名を作成します(つまり、ファイルの内容のハッシュを作成し、これをファイル名に含めるので、ブラウザはこれらの更新ファイルのキャッシュバージョンを提供しないようにします。 js-filename.[hash of content].js ではなく、単に js-filename.js ). これの問題は、ブラウザがキャッシュされたバージョンの index.html ファイルが生成され、それは古いバージョンのJSファイルを指すことになります。

この問題を解決するには、ウェブサーバーに適切な Cache-Control の設定 (上記の概要) を index.html ファイルを作成し、ブラウザがこのファイルをキャッシュしないようにします。