Angular:如何阻止缓存

Question

每次我发布一个新版本的应用程序时，在几个小时/一天中，我有一些用户报告说，他们直到用ctrl+F5重新加载网站才看到变化。

我设置了一些配置来强制浏览器不使用缓存:

In index.html:

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">

在angular.json

...
"configurations": {
"production": {
"outputHashing": "all",
...

但是当我在部署的应用程序上导航时，我在Chrome的网络选项卡中检查，我可以看到main.js(它的名称中包含哈希):

Status Code: 200 OK (from disk cache)

如何完全阻止浏览器使用缓存?

编辑:

我看到的是，如果我在网站上浏览，在地址栏中输入地址，或者使用收藏夹，就会加载旧版本的文件。但是如果我按F5(即使没有ctrl)，我得到的是当前版本。

更糟的是:我用了F5 ->获取新版本。然后我使用fav/输入地址->回到旧版本……我困惑

似乎只有当我在网站基础url上导航时，我才能获得网站的旧版本。如果URL是一个内部页面，我得到当前版本。

许多thx

Answer 1

我也遇到了同样的问题。最后，我通过在app.component.ts中使用如下方法实现自动加载机制来解决这个问题:

insertParam(key, value) {
key = encodeURIComponent(key);
value = encodeURIComponent(value);
// kvp looks like ['key1=value1', 'key2=value2', ...]
let kvp = document.location.search.substr(1).split('&');
let i=0;
for(; i<kvp.length; i++){
if (kvp[i].startsWith(key + '=')) {
let pair = kvp[i].split('=');
pair[1] = value;
kvp[i] = pair.join('=');
break;
}
}
if(i >= kvp.length){
kvp[kvp.length] = [key,value].join('=');
}
// can return this or...
let params = kvp.join('&');
// reload page with new params
document.location.search = params;
}

CheckVersion(){
this.versionService.getVersion().subscribe(
(x)=>{
console.log(x);
console.log(environment.version);
if(x.value!=environment.version){
console.log('reload');
console.log(this.getParameterByName('version'));
console.log(x.value);
if(this.getParameterByName('version')!=x.value){
this.insertParam('version',x.value);
}
}
},
(e)=>{
console.log(e);
}
);
}

在服务器端实现一个API函数来返回最新版本