Angular 12 应用程序仍在使用 output-hashing=all 进行缓存

Question

我有一个 Angular 12 应用程序，它具有不同的构建环境（dev/staging/prod），并且我已在以下位置配置了输出散列angular.json：

"configurations": {
    "production": {
        "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ],
          "optimization": true,
          "outputHashing": "all" <-----

输出文件确实包含哈希值，但除非我在浏览器中进行硬刷新，否则我仍然看到旧版本。

main.07258fce7f84f8b6013e.js
polyfills.4cc5b416b55531e38cd8.js
runtime.734c276f75a5d81bc54b.js

登陆页面只是一个登录表单，但版本显示在表单下方。它会显示旧版本，直到浏览器中硬刷新为止，此时它会正确显示新版本。

这是因为index.html与所有旧的 JS 引用一起被缓存了吗？

如果是这样我该如何缓存这个？

Answer 1

我通过指示 Web 服务器缓存控制策略不缓存 HTML 文件来解决此问题。这是必要的，因为 HTML 文件包含对 Angular 哈希脚本和 CSS 的引用。

我们正在推出频繁的更新，因此目前，我将其设置为积极不缓存，但可以根据需要将其调整为更长的时间段。

在我们的例子中，我们使用 IIS，我必须在 web.config 文件中创建 IIS 重写规则。

<outboundRules>
    <rule name="RewriteCacheControlForHTMLFiles" preCondition="FileEndsWithHtml">
        <match serverVariable="RESPONSE_Cache_Control" pattern=".*" />
        <action type="Rewrite" value="max-age=0" />
    </rule>
    <preConditions>
        <preCondition name="FileEndsWithHtml">
            <add input="{REQUEST_FILENAME}" pattern="\.html$" />
        </preCondition>
    </preConditions>
</outboundRules>