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?

Solution 1

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

example code

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

Solution 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

Comments

[Ramesh Rajendran]

you can use any other event instead of viewContentLoaded, that is only for example :)

[Estus Flask]

The question addresses browser cache, $templateCache has nothing to do with the problem, despite what the title says.

[Ramesh Rajendran]

@estus , He said, he used lot of html template files ? did you fully read the questions?

[mrb398]

By adding in the above code, it appears to be working as expected. But now modules I've added aren't loading template files (Error: [$compile:tpload] Failed to load template: template/pagination/pagination.html)