如何防止Angular 2網站上的瀏覽器緩存？

我們目前正在開發一個定期更新的新項目，我們的客戶每天都在使用它。這個項目正在使用angular 2開發，我們正面臨緩存問題，那就是我們的客戶沒有看到他們機器上的最新變化。如何防止Angular 2網站上的瀏覽器緩存？

主要是js文件的html/css文件似乎得到了正確更新，沒有給出任何麻煩。

2016-09-22 Rikku121

瀏覽器緩存工程獨立於您的項目，所以你必須告訴你的客戶端清理瀏覽器緩存我害怕。 – Kelo

非常好的問題。我也有同樣的問題。解決這個問題的最好方法是什麼？用gulp或者任何類似的工具發佈Angular 2應用程序可能嗎？ – jump4791

@ jump4791最好的方法是使用webpack並使用生產設置編譯項目。我目前使用這個回購，只需按照步驟，你應該是好的：https://github.com/AngularClass/angular2-webpack-starter – Rikku121

找到一種方法來做到這一點，只需添加一個查詢字符串來加載你的組件，例如：

@Component({ 
    selector: 'some-component', 
    templateUrl: `./app/component/stuff/component.html?v=${new Date().getTime()}`, 
    styleUrls: [`./app/component/stuff/component.css?v=${new Date().getTime()}`] 
})

這應該強迫客戶端加載模板，而不是瀏覽器的服務器的副本。如果你想它只是一段時間後刷新，你可以使用這個ISOString代替：

new Date().toISOString() //2016-09-24T00:43:21.584Z

和substring一些字符，以便將例如一個小時後，只改變：

new Date().toISOString().substr(0,13) //2016-09-24T00

希望這有助於

來源

2016-09-24 00:43:49 Rikku121

所以我的實現並沒有結束工作。緩存是一個奇怪的問題。有時有效，有時不會。哦間歇性問題的美麗。因此，我實際上已將您的答案調整爲：'templateUrl：'./app/shared/menu/menu.html?v='+ Math.random（）' – Rossco

我的解決方案類似於：https：//csjdpw.atlassian。 net/wiki/x/gCGWAg –

我得到了我的templateUrls的404。例如： GET http：// localhost：8080/app。component.html /？v = 0.0.1-alpha 404（Not Found）任何想法爲什麼？ – Shenbo

在每個HTML模板，我只是在頂部添加以下meta標籤：

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"> 
<meta http-equiv="Pragma" content="no-cache"> 
<meta http-equiv="Expires" content="0">

在我的理解中，每個模板都是獨立的，因此它不會繼承index.html文件中的元緩存規則設置。

來源

2016-12-01 08:56:08 Rossco

我們已經切換到webpack一段時間了，它會照顧緩存破壞我們的角色應用程序。儘管知道你的解決方案是有效的。謝謝 – Rikku121

這種解決方案不起作用 –

Didnt對我來說不是工作 – AngularM

angular-cli通過爲build命令提供--output-hashing標誌來解決這個問題。用法示例：

ng build --aot --output-hashing=all

Bundling & Tree-Shaking提供了一些細節和上下文。運行ng help build，單證標誌：

--output-hashing=none|all|media|bundles (String) Define the output filename cache-busting hashing mode. 
aliases: -oh <value>, --outputHashing <value>

雖然這只是適用於angular-cli用戶，它出色的作品，並且不需要修改任何代碼或額外的工具。

來源

2017-10-31 15:38:07 Jack

這是正確的方法來做到這一點，應該是選擇的答案！ – jonesy827

這不適用於我們的應用程序。它帶有查詢字符串參數的templateUrl太糟糕，不適用於CLI – DDiVita

如何防止Angular 2網站上的瀏覽器緩存？

回答

相關問題