Update cached templates

Question

I make use of templateUrl and it works great!

app.directive('myDir', function() {
    return {
        templateUrl: 'partials/directives/template.html'
    };
};

However... when I make changes to these templates it doesn't update. In development it isn't a big problem cause I konw what is updated and can just clear the cache manually.

But I can't clear the cache of all users. Is there a way to do this? Like using the CACHE-CONTROL metatag or something like that?

Answer 1

As far as I see, you have two options -

1. use $cacheFactory service to remove the old cache After a template has been fetched, Angular caches it in the default $templateCache services

   // Please note that $cacheFactory creates a default key '$http'
   
   var cache = $cacheFactory.get('$http');
   
   // The remove() function removes a key-value pair from the cache, 
   // if it’s found. If it’s not found, then it just returns undefined.
   
   cache.remove(your url);
   

2. use file versioning rename the file with each change - i.e. if your first version of the file is template-1.0.1.html, when you make some code changes rename it to template-1.0.2.html and so on. This way the new file will be downloaded each time you make some changes.

Answer 2

A quick and dirty solution is to disable caching in the $httpProvider

app.config(function ($httpProvider) {
    $httpProvider.defaults.headers.get = {
        'Cache-Control': 'no-cache'
    };
});

I wouldn't recommend this. But it works.