Angular 应用程序必须在新部署后清除缓存

Question

我们有一个 Angular 6 应用程序。它在 Nginx 上提供。 SSL 已开启。

当我们部署新代码时，大多数新功能都可以正常工作，但对于某些更改则不行。例如，如果前端开发人员更新并部署服务连接，用户必须打开隐身窗口或清除缓存才能看到新功能。

哪些类型的更改不会自动更新？为什么他们与其他人不同？

避免该问题的常见解决方案是什么？

Answer 1

问题是当一个静态文件被缓存时，它可能会被存储很长一段时间，然后才会过期。如果您对网站进行更新，这可能会令人烦恼，但是，由于文件的缓存版本存储在访问者的浏览器中，他们可能无法看到所做的更改。

Cache-busting 通过使用唯一的文件版本标识符来告诉浏览器该文件的新版本可用，从而解决了浏览器缓存问题。因此，浏览器不会从缓存中检索旧文件，而是向源服务器请求新文件。

Angular cli 通过为构建命令提供 --output-hashing 标志来解决此问题。

查看官方文档：https://angular.io/cli/build

示例（旧版本）

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

下面是你可以传入--output-hashing的选项

• 无：不执行散列
• 媒体：仅向通过 [url|file]-loaders 处理的文件添加哈希
• bundles：只在输出 bundles 中添加哈希
• 全部：向媒体和捆绑包添加哈希

更新

对于较新版本的 Angular（例如 Angular 10），该命令现已更新：

ng build --prod --aot --outputHashing=all

Answer 2

为我添加：

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

只有构建命令是不够的，当你有你的应用程序时 在 CDN 和良好的缓存 nginx 配置之后。

1- 首先是删除 html 文件的缓存（nginx）：

    location ~ \.(html)$ {
        add_header Pragma "no-cache";
        add_header Cache-Control "no-store";
        add_header strict-transport-security "max-age=31536000";
        add_header X-Frame-Options "SAMEORIGIN";
        try_files $uri $uri/ /index.html;
    }

对于静态文件 (js/css ...) 保持缓存工作（网络性能/可用性）：

    location ~ \.(css|htc|less|js|js2|js3|js4)$ {
        expires 31536000s;
        add_header Pragma "public";
        add_header Cache-Control "max-age=31536000, public";
        try_files $uri $uri/ /index.html;
    }

2- 出于测试目的，让 dev/prod 构建完全相同。 最终构建开发命令：

    ng build --env=dev --aot=true --output-hashing=all --extract-css=true 

3- 我们需要在每次部署客户端浏览器时从服务器加载所有 javascript 文件，而不是从缓存中加载， 即使部署是次要更新。 就像角度有一些错误： https://github.com/angular/angular-cli/issues/10641 发生在我身上。

我结束了使用 bash 的强大功能，这是我用于杀死缓存的脚本 在使用 package.json 文件的每个开发（产品/开发）上：

"scripts": {
 ...
    "deploy_dev": "ng build --env=dev --aot=true --output-hashing=all --extract-css=true && npm run add_date",
    "deploy_prd": "ng build --prod && npm run add_date",
    "add_date": "npm run add_date_js && npm run add_date_css && npm run rm_bak_files",
    "add_date_js": "for i in dist/*; do if [ -f $i ]; then LC_ALL=C sed -i.bak 's:js\":js?'$(date +%H%M%m%d%y)'\":g' $i; fi done",
    "add_date_css": "sed -i.bak 's:css\":css?'$(date +%H%M%m%d%y)'\":g' dist/index.html",
    "rm_bak_files": "find dist -name '*.bak' -exec rm -Rf {} \\;"
},

命令说明：
add_date_js：用“js?{date+%H%M%m%d%y}”查找并替换所有文件“js”
add_date_css：在 dist/index.html "css" 中查找并替换为 "css?{date+%H%M%m%d%y}"
rm_bak_files：删除所有.bak文件（网络性能）

这些 sed 命令适用于 GNU/BSD/Mac。

链接：
Angular - Prod Build not generating unique hashes
sed in-place flag that works both on Mac (BSD) and Linux
RE error: illegal byte sequence on Mac OS X
Inline if shell script
How to loop over files in directory and change path and add suffix to filename
Is it possible to build separate CSS file with angular-cli?

Answer 3

虽然accepted answer above 可以工作，但应该在angular.json中进行此调整，在configurations => <my-env-name> => outputHashing => 设置为all (用于生产环境）。

简化示例：

{
  "projects": {
    "<my-project>": {
      "architect": {
        "build": {
          "configurations": {
            "<my-env-name>": {
              "outputHashing": "all"
            }
          }
        }
      }
    }
  }
}

正如上述帖子中所述，此配置的可用选项：

• 无：不执行散列
• 媒体：仅向通过 [url|file]-loaders 处理的文件添加哈希
• bundles：仅将哈希添加到输出包中
• 全部：向媒体和捆绑包添加哈希