Clear template cache after deployment

Question

I want to make sure my users see the latest version of my Angular app after deployment. What is the right strategy for clearing the template cache in that case?

I read somewhere you can do $templateCache.removeAll() in app.run, but this will disable caching altogether I think?

Answer 1

You would need to write an interceptor and "catch" all template requests - you should be able in this interceptor to add a URL parameter that would version your template assets.

Example:

// App .config()
$httpProvider.interceptors.push(function($templateCache) {
  return {
    'request' : function(request) {
      if($templateCache.get(request.url) === undefined) { // cache miss
          // Item is not in $templateCache so add our query string
          request.url = request.url + '?appVersion=' + appService.getConfig().version;
      }
      return request;
  }
};

You would of course need to update this app configuration each time you deploy your new version (via build tasks you can update this file automatically). You might need to add extra checks (e.g. compare if the URL path ends with '.html') so you are sure you are not high-jacking actual HTTP requests.

The downside of this approach is that sometimes you might have a template that has not updated and you don't want for the browser cache to be trashed. If this is your case, then you should add some sort of md5(templateContent) for each --- this can be achieved at build time via Grunt/Gulp as well.