如何防止Angular 2网站上的浏览器缓存？

我们目前正在开发一个定期更新的新项目，我们的客户每天都在使用它。这个项目正在使用angular 2开发，我们正面临缓存问题，那就是我们的客户没有看到他们机器上的最新变化。如何防止Angular 2网站上的浏览器缓存？

主要是js文件的html/css文件似乎得到了正确更新，没有给出任何麻烦。

2016-09-22 Rikku121

浏览器缓存工程独立于您的项目，所以你必须告诉你的客户端清理浏览器缓存我害怕。 – Kelo

非常好的问题。我也有同样的问题。解决这个问题的最好方法是什么？用gulp或者任何类似的工具发布Angular 2应用程序可能吗？ – jump4791

@ jump4791最好的方法是使用webpack并使用生产设置编译项目。我目前使用这个回购，只需按照步骤，你应该是好的：https://github.com/AngularClass/angular2-webpack-starter – Rikku121

找到一种方法来做到这一点，只需添加一个查询字符串来加载你的组件，例如：

@Component({ 
    selector: 'some-component', 
    templateUrl: `./app/component/stuff/component.html?v=${new Date().getTime()}`, 
    styleUrls: [`./app/component/stuff/component.css?v=${new Date().getTime()}`] 
})

这应该强迫客户端加载模板，而不是浏览器的服务器的副本。如果你想它只是一段时间后刷新，你可以使用这个ISOString代替：

new Date().toISOString() //2016-09-24T00:43:21.584Z

和substring一些字符，以便将例如一个小时后，只改变：

new Date().toISOString().substr(0,13) //2016-09-24T00

希望这有助于

来源

2016-09-24 00:43:49 Rikku121

所以我的实现并没有结束工作。缓存是一个奇怪的问题。有时有效，有时不会。哦间歇性问题的美丽。因此，我实际上已将您的答案调整为：'templateUrl：'./app/shared/menu/menu.html?v='+ Math.random（）' – Rossco

我的解决方案类似于：https：//csjdpw.atlassian。 net/wiki/x/gCGWAg –

我得到了我的templateUrls的404。例如： GET http：// localhost：8080/app。component.html /？v = 0.0.1-alpha 404（Not Found）任何想法为什么？ – Shenbo

在每个HTML模板，我只是在顶部添加以下meta标签：

<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">

在我的理解中，每个模板都是独立的，因此它不会继承index.html文件中的元缓存规则设置。

来源

2016-12-01 08:56:08 Rossco

我们已经切换到webpack一段时间了，它会照顾缓存破坏我们的角色应用程序。尽管知道你的解决方案是有效的。谢谢 – Rikku121

这种解决方案不起作用 –

Didnt对我来说不是工作 – AngularM

angular-cli通过为build命令提供--output-hashing标志来解决这个问题。用法示例：

ng build --aot --output-hashing=all

Bundling & Tree-Shaking提供了一些细节和上下文。运行ng help build，单证标志：

--output-hashing=none|all|media|bundles (String) Define the output filename cache-busting hashing mode. 
aliases: -oh <value>, --outputHashing <value>

虽然这只是适用于angular-cli用户，它出色的作品，并且不需要修改任何代码或额外的工具。

来源

2017-10-31 15:38:07 Jack

这是正确的方法来做到这一点，应该是选择的答案！ – jonesy827

这不适用于我们的应用程序。它带有查询字符串参数的templateUrl太糟糕，不适用于CLI – DDiVita

如何防止Angular 2网站上的浏览器缓存？

回答

相关问题