Best way to manually clear out $templateCache in AngularJS

Question

I'm working on a system that has a lot of html template files being used all throughout the system.

The problem is when I deploy updates, users are unable to see html changes because their browsers are using the cached version of them. So far, the only way I am able to get users to see html updates is to have them perform a hard reload of their browser.

For obvious reasons this is not ideal. As mre users migrate to this system, it has become a tedious chore making sure everyone performs that action

Is there a way I can force browsers accessing the system to clear template cache at my command? Maybe manually clear it upon logging into the system?

Answer 1

$templateCache.removeAll() is good to remove template cache

example code

myApp.run(function($rootScope, $templateCache) {
   $rootScope.$on('$viewContentLoaded', function() {
      $templateCache.removeAll();
   });
});

Answer 2

You can use angular-cache-buster plugin. I have also had the problem of loading the cached templates and the issue was solved by using this great plugin.

https://github.com/saintmac/angular-cache-buster