Angular disable cached parts in production

Question

I am developing a site, but every time I upload a new version to my server, users need to clear the cache to see the changes, what is the solution to this problem?

I will try two ways to solve this problem from the answers to the questions here:

First way:

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

But this has a problem with things like ui.bootstrap and its throw error.

The second way:

 $rootScope.$on("$stateChangeStart", function( event, toState, current ) { if (typeof(current) !== 'undefined'){ $templateCache.remove(current.templateUrl); } }) 

This is not a mistake, but I do not know if this solution is correct, and if it works, what should I do?

Answer 1

This is a server configuration issue and the way it tells the browser to cache HTML files used as partial parts of templates.

Browser Caching Overview

You are trying to execute $templateCache.remove(..) and $templateCache.removeAll() , which will not work because the templates are not loaded yet, or the browser will simply reload them using the cached version.

You need to check the network history in the browser to make sure that the server correctly processes HTML requests. Submit the caching header settings that you expected. For each partial response, there must be 302 (unmodified) response. When the HTML file has changed, the server should send a new modified browser.

Another problem is that the default cache duration on the server may be too long. This tells the browser how often it should check the server to send new versions of the HTML file. You might want to reduce this duration to 1 hour.

Most web servers are preconfigured to use a file with a .html extension that will never change and is static. Thus, the default settings should have a browser cache those files as long as possible.

You might want to rename these files to something like .ahtml and use this as your partial file names. There should not be a predefined configuration to force cashing of these types of files.

Understanding $ templateCache

This is a very simple cache service in AngularJS. If the URL is not found in memory, it is downloaded from the server. The next time a partial portion is required while the application is running, the memory version is used. Using this server has nothing to do with server / browser caching.

Templates in the right direction

It is best to create a single JavaScript file containing all the partial templates that the application will require. This JS file will call the $templateCache service and add these templates. This improves the startup performance of your application and eliminates the problem of working with server / browser caching.

There are several grunt tasks that can do this.

https://www.npmjs.com/package/grunt-angular-templates

https://github.com/karlgoldstein/grunt-html2js

Combine this with a JavaScript minifier and merge all your JS into one file, and you're well on your way.

Answer 2

Here is a pretty easy way to do this. Each deployment has a unique hash, which is used in the HTTP interceptor to request new partial patterns for each release:

 app.factory('cachebustInjector', function(conf) { // generated each deploy var buster = 'kaqreFZ3MWcGzfS86iSiud'; var cachebustInjector = { request: function(config) { if (config.url.indexOf('static/angular_templates') > -1) { config.url += ['?v=', buster].join(''); } return config; } }; return cachebustInjector; }); app.config(['$httpProvider', function($httpProvider) { $httpProvider.interceptors.push('cachebustInjector'); }]);