Prevent browser cache of angular templates

Question

I've been researching back and fourth on this issue, which is quite simple: Modern browsers (chrome/ FF) are caching stuff, html pages among others.
When you release a new version, angular GETs these templates. However since the browser serve a cache version of these pages and not the new updated version.

I've read about 2000 article on how to achieve this.. None of the "meta" tags worked for me.. (for instance: Using <meta> tags to turn off caching in all browsers?) The only thing that works is manually manage the versions of the file by adding some param value http://bla.com?random=39399339. However this is really annoying and extremely tough to maintain if "clear caching" is only sometimes needed (mainly between versions).

Is there any chance browsers does not provide a simple, controlled way to manually "clear cache". Either on server or client way?

P.S. Angular template makes it even tougher to manage.

Appending some random number / file hash / timestamp onto the end of the file is how I've been doing it and I agree that it is very annoying. Alternatively you could set the caching headers when your server serves up the files so that they are never cached — rob, Jun 30 '14 at 18:49
Using angularjs gulp templatecache package. Writing gulp rules to package the views directly in the code. Best upgrade ever, app loading in several ms. — Pierre Emmanuel Lallemant, Nov 25 '19 at 08:22

score 0 · Answer 1 · answered Jun 30 '14 at 19:37

This is a question with so many answers, and it depends on your server, etc...

Normally HTML files are not cached
AngularJS caches templates after first calling them, using the $templateCache service (during application runtime)
You can use html2js with grunt or gulp to compile your templates in one JavaScript file
A lot of people don't rely on client caching, etags, etc... and add a version, hash, suffix and/or a prefix to static resources uri

Unfortunately, static HTML files **are** normally cached. – mirabilos Aug 11 '16 at 14:47 — mirabilos, Aug 11 '16 at 14:47

score 0 · Answer 2 · answered Feb 07 '17 at 15:33

i am using interceptors. if request includes exact chunk of url(path to templates) i set header "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;
            }
        }
})

Prevent browser cache of angular templates

2 Answers2

Linked