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

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.?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.

• javascript
• html
• angularjs
• caching

• 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 Commented Jun 30, 2014 at 18:49
• What path did you choose to solve this problem? – Georgy Commented Dec 21, 2015 at 8:15
• Using angularjs gulp templatecache package. Writing gulp rules to package the views directly in the code. Best upgrade ever, app loading in several ms. – anotherdev Commented Nov 25, 2019 at 8:22

2 Answers 2

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;
            }
        }
})

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