时间戳

首页 > 解决方案 > Angular 上的缓存破坏

javascript - Angular 上的缓存破坏

问题描述

我有一个有角度的应用程序，并且在部署后我经常收到最终用户的抱怨，他们无法看到新功能（他们仍然必须在更改反映之前ctrl+ ）。f5

我需要合并缓存破坏吗？经过一番谷歌搜索，我看到了以下命令：

ng build --output-hashing=all

我尝试在我的部署管道中使用它，它能够解决一些问题，但不是全部。我仍然需要做一些ctrl更改f5。

如何确保为最终用户更新我的应用程序而不要求他们清除自己的缓存？

{
    "name": "portfolio",
    "version": "0.0.0",
    "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "prod-build-dev-old": "ng build --prod --configuration=dev --build-optimizer",
    "prod-build-dev": "ng build --prod --configuration=dev --build-optimizer --aot --output-hashing=all",
    "prod-build-staging": "ng build --prod --configuration=staging --build-optimizer"
},

标签： javascriptangulartypescript

解决方案

我认为这是浏览器的缓存问题。

我的建议是在你的添加这三行index.html：

<!doctype html>
<html>
  <head>
    ...

    <!--  Add the 3 following lines -->

    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="expires" content="-1">

    ...
  </head>
  <body>
    ...
  </body>
</html>

一旦部署了这些更新，您的客户就不必ctrl + f5在每次部署后都获得新功能。

有关浏览器缓存控制的更多信息，请查看： MDN 中的 Cache-Control。

推荐阅读