浏览器在部署新版本后会看到旧版本的Angular应用程序，即使在清除缓存之后也是如此
我有一个Angular 11应用程序，我正在使用以下命令构建用于在生产中部署的应用程序：
npm install
npm run build -- --prod --outputHashing=all我遇到的问题是，一旦部署，当我用浏览器访问应用程序的URL时，我仍然看到应用程序的旧版本。
我最初认为这是一个缓存问题，即使我是使用--outputHashing=all选项进行编译的(从我所能看出的情况来看，它似乎是有效的，dist文件夹中的输出文件似乎具有随机的文件名)。事实似乎是这样的:如果我在Chrome的dev选项中禁用缓存后刷新页面，它现在会显示更新后的应用程序。
然而，这里有一个问题:如果我关闭浏览器并再次打开它...我又开始看老应用了！因此，清除缓存似乎是一种临时解决方案。
经过进一步的调查，我怀疑这与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 see服务器的.NET核心服务中，但它看不出这有什么不同，它只是提供文件，而不是进一步的操作。
回答 1
Stack Overflow用户
发布于 2021-04-01 21:51:45
即使文件名都是散列的，也帮不了多少忙。唯一的方法就是按Ctrl + Shift +R进行硬性刷新，或者任何硬性刷新是唯一的方法，在javascript中，location.reload()就是函数。
好事情是我们有PWA (服务工作者)可以检测到您的网站的所有变化，在您的浏览器上。
只需添加ng add @angular/pwa，您就可以与service worker集成。
并且仅仅使用它来检测变化。
将此代码转换为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 is true时，您可以向用户显示一些警告消息，当用户选择该消息时，您可以调用函数location.reload
<div *ngIf="hasUpdate">
<button (click)="reloadSite()">Reload</button>
</div>这是处理此缓存问题的最佳方法。
https://stackoverflow.com/questions/66905701
复制相似问题
腾讯云开发者
