浏览器会在部署新版本后，甚至在清除缓存后，看到旧版本的Angular应用程序

Question

我有一个Angular 11应用程序，我正在使用以下命令构建该应用程序，以便在生产中部署：

npm install
npm run build -- --prod --outputHashing=all

我遇到的问题是，一旦部署，当我用浏览器访问应用程序的URL时，我仍然会看到该应用程序的旧版本。

我最初认为这是一个缓存问题，尽管我使用--outputHashing=all选项进行编译(据我所知，它似乎在工作，dist文件夹中的输出文件似乎有随机的文件名(。事实似乎是这样的：如果我在禁用Chrome的开发选项中的缓存后刷新页面，它现在会显示更新的应用程序。

然而，问题是：如果我关闭浏览器并再次打开。。。我又看到了旧的应用程序！因此，清除缓存似乎是一个临时解决方案。

经过进一步的调查，我怀疑这与angular的service workers有关，因为当我打开Chrome的开发工具加载页面时，我可以看到很多网络调用都被标记为Served from service worker。

然而，我还不是Angular方面的专家，不知道如何进一步诊断。我读过angular网站上关于服务人员的文档，但它并没有帮助我弄清楚问题的确切位置。有人能给我指正确的方向吗？这是我的服务工作者配置文件，它是在创建应用程序时自动生成的。让我知道是否还有其他文件我应该提供：

{
"$schema": "./node_modules/@angular/service-worker/config/schema.json",
"index": "/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html",
"/manifest.webmanifest",
"/*.css",
"/*.js"
]
}
},
{
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**",
"/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
]
}
}
]
}

如果有什么不同的话，该应用程序托管在运行嵌入式Katana Web服务器的.NET Core服务中，但它看不出这会有什么不同，它只是在提供文件而不进行进一步操作。

Answer 1

即使文件名都是散列的，也无济于事。唯一的方法是按Ctrl+Shift+R进行硬刷新，或者任何硬刷新都是唯一的方法，在javascript中，location.reload()就是函数。

好的是，我们有PWA(服务人员(可以在您的浏览器上检测您网站的所有更改。

只需添加ng add @angular/pwa，您就可以与服务人员集成。

使用它只需检测变化即可。

此代码到app.component.ts

hasUpdate = false;
constructor(
private swUpdate: SwUpdate,
) {
}
ngOnInit(): void {
// check for platform update
if (this.swUpdate.isEnabled) {
interval(60000).subscribe(() => this.swUpdate.checkForUpdate().then(() => {
// checking for updates
}));
}
this.swUpdate.available.subscribe(() => {
this.hasUpdate = true;
});
}
reloadSite(): void {
location.reload();
}

当有hasUpdate是true时，您可以向用户显示一些警告消息，当用户选择该消息时，您可调用功能location.reload

<div *ngIf="hasUpdate">
<button (click)="reloadSite()">Reload</button>
</div>

这是处理此缓存问题的最佳方法。