防止Angular模板被浏览器缓存

Question

我一直在研究这个问题，问题很简单： 现代浏览器（chrome/FF）会缓存各种东西，包括HTML页面。
当您发布新版本时，Angular会GET这些模板。 但是由于浏览器提供的是这些页面的缓存版本而不是新更新的版本。

我已经看了大约2000篇文章来解决这个问题。 没有任何“meta”标签对我有用。（例如：在所有浏览器中使用标签关闭缓存？） 唯一有效的方法是手动管理文件版本，通过添加一些参数值http://bla.com?random=39399339。 然而，如果“清除缓存”只有时不时需要（主要是在版本之间），那么这真的很麻烦且难以维护。

是否有可能浏览器不提供简单、可控的方式来手动“清除缓存”。 无论是服务器端还是客户端都没有呢？

P.S. Angular模板使得管理变得更加困难。

- Tomer

---

将一些随机数字/文件哈希值/时间戳添加到文件末尾是我一直以来的做法，但我同意这样做非常烦人。或者，您可以在服务器提供文件时设置缓存标头，以便它们永远不会被缓存。 - rob

你选择了哪条路径来解决这个问题？ - Georgy

使用AngularJS Gulp TemplateCache包。编写Gulp规则以直接将视图打包到代码中。这是有史以来最好的升级，应用程序在几毫秒内加载。 - Pierre Emmanuel Lallemant

Answer 1

这是一个有很多答案的问题，它取决于你的服务器等等...

• 通常 HTML 文件不会被缓存
• AngularJS 在第一次调用后使用 $templateCache 服务（在应用程序运行时）缓存模板
• 您可以使用 grunt 或 gulp 中的 html2js 将您的模板编译成一个 JavaScript 文件
• 很多人不依赖客户端缓存、ETags 等，而是在静态资源 URI 中添加版本、哈希、后缀和/或前缀

- Thomas Roch

---

很遗憾，静态HTML文件通常会被缓存。 - mirabilos

Answer 2

我正在使用拦截器。如果请求中包含精确的URL片段（即模板路径），我将设置头部信息“Cache-Control”：“no-cache，must-revalidate”

$httpProvider.interceptors.push(function($q,ngToast) {

        return {
            request: function(config){
                if(config.url.includes('some_url_to_your_template')){
                    Object.assign(config.headers,{"Cache-Control": "no-cache, must-revalidate"});

                }

                return config;
            }
        }
})

- dimson d