Angular 角度PWA哈希文件缓存问题

似乎在使用azure重新构建之后，我的PWA提供了错误的文件

这是我的

运行时。*.js

在新构建之后

如您所见，

runtime.*.js

被用作我的

html

文档

然后经过一番艰苦的刷新

这是正确的文件

现在我知道服务人员缓存捆绑的文件。。但是为什么在新的azure构建之后，它会将文件更改为html文档呢

这是我的

ngsw config.json

{
    "index": "/index.html",
    "assetGroups": [
        {
            "name": "app",
            "installMode": "prefetch",
            "resources": {
                "files": ["/favicon.ico", "/index.html", "/manifest.json", "/*.bundle.css", "/*.bundle.js", "/*.chunk.js"]
            }
        },
        {
            "name": "assets",
            "installMode": "lazy",
            "updateMode": "prefetch",
            "resources": {
                "files": ["/assets/**", "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"]
            }
        }
    ]
}

我从许多教程中学习了如何正确设置角度PWA

我发现了这篇文章，它告诉你azure错误地提供了

.json

文件，为了解决这个问题，你可以在

web.config

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
    </staticContent>
    <!-- IIS URL Rewrite for Angular routes -->
    <rewrite>
      <rules>
        <rule name="Angular Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

这是我的发布管道


我如何解决这个问题

任何帮助都将不胜感激

在开头有散列

用户单击水疗中心的主页链接

将页面设置为
site.com/#/home
。这条路很好。#之后的部分永远不会发送到服务器。角度路由器可以从UrL读取要服务的路由和组件

更改使用哈希策略：false

然后，Angular说我们将使用
site.com/home
作为路径。angular不会直接向服务器请求文件
/home
，而是截取它并为组件提供服务。但要使其工作，必须首先加载角路由器。否则，任何试图直接打开
site.com/home
的人都会得到404

要修复此问题，建议通过在服务器上重写路径返回index.html。作为对404候选页面（
/home
）的响应，提供索引文件，以便路由器可以首先加载，然后提供正确的页面

webconfig文件的重写规则就是这样做的。部署后，当html页面请求运行时*.js文件时，Azure将提供index.html文件

这意味着Azure在服务器上找不到文件runtime*.js。您得到了fall back index.html

希望这能为下一步的挖掘提供一些线索。
我的猜测是，部署后打开index.html时，它是从缓存加载的。有链接到旧的js文件。因此，对runtime*（旧版本）*.js（现在在部署后删除）的请求将为您提供回退文件
 你能分享更多关于这个项目是如何建立的信息吗？在azure devops中构建管道还是visual studio？有构建配置吗？@LeviLu MSFT是的，该项目是使用azure devops构建管道构建的-我已使用管道配置编辑了我的问题。我通过以下方式创建了一个简单的pwa项目以进行测试。我使用上面提到的任务在本地代理上构建这个测试项目。我还在本地运行
ngbuild--prod
。它们都生成了正确的runtime..js文件。对于疑难解答，您是否可以在本地构建项目，并检查它是否生成正确的运行时..js文件。Hey@LeviLu MSFT是，请查看它在本地正确构建-但一旦azure发布新构建，就会发生一些情况，并返回错误的文件..以便对构建管道或发布中是否存在问题进行疑难解答管道您能否从构建管道下载发布到azure devops服务器的工件，并检查由构建管道生成的runtime.js文件是否正确。啊，我明白了，那么我该如何解决这个问题？我现在还不清楚该如何解决。您可以通过单独为html页面设置过期标题进行测试吗？让我们知道。我需要申请什么标题？？