Angular2强制/硬重新加载浏览器缓存脚本？答案

【问题标题】：Angular2 force/hard reload of browser cached scripts?Angular2强制/硬重新加载浏览器缓存脚本？
【发布时间】：2018-04-10 10:35:40
【问题描述】：

我知道网上有很多关于这个的帖子，但没有一个让我满意。大多数人建议在每个脚本/css 文件中附加一个 verizon 编号。但这对我来说听起来像是很多工作（项目有点），也许有一些方法可以只对输出文件进行版本控制，一些我不知道的 CLI 命令？

我的解决方案是基于对 API 的简单 ping 以获取新版本号，然后 > 存储然后重新加载页面。这是一个棘手的部分——即使location.reload(true) 也不会刷新缓存的角度内容。手动 CTRL+SHIFT+R 可以很好地完成这项工作。如果以编程方式硬重新加载可以工作，这对我来说已经足够了。

我也试过this.compiler.clearCache();，但也没有效果。

提前致谢！ :)

【问题讨论】：

标签： javascript angular browser angular2-routing versioning

【解决方案1】：

@angular/cli 为您完成缓存清除。如果您使用 --prod 标志运行 ng build，它会将哈希附加到脚本/css 文件名。

【讨论】：

谢谢！这将是完美的，但我目前在尝试使用 --prod 标志构建时面临“JavaScript 堆内存不足”的问题。我将尝试一些解决方法来增加构建的最大 RAM 量。或者也许你知道一些？
找到最大堆异常的解决方案。似乎我必须使用长命令，因为我们使用 VSTS 进行自动部署，因此我不能只编辑 ng 文件。 'node --max_old_space_size=4096 node_modules/@angular/cli/bin/ng build --prod ' 事实上，我看到附加到文件的 guid。希望这会帮助我。再次感谢！

【解决方案2】：

编辑：如果您使用 angular-cli，@Tomasz 的答案可能比下面列出的方法更好。

理想情况下，您应该使用Webpack 之类的模块捆绑器或Grunt 之类的任务运行器来自动“指纹”您的文件（即，根据文件的内容将唯一标识符附加到文件名）。

但如果这不是一个选项，一个简单的黑客将是：

在您的 HTML 上设置缓存标头以避免在浏览器上缓存
将随机查询参数附加到 HTML 中的脚本标记 URL，您可以在每次需要新版本时更改该参数。

<script src='/js/some.js?v=1.1.3'></script>

更改随机查询参数（示例中为v）将确保浏览器发出新请求，因为 URL 与缓存（旧）版本不同

【讨论】：