Angularjs - how to clear $routeProvider's caches of templateUrl

Question

I have really basic use case in my app where I use AngularJS (1.0.8) for front end and Grails for back end. In the app layout I have a language switcher which allows the user to change the language. Switching the language, it does new http request to retrieve the page. Grails renders all language related stuff (i.e. labels) properly translated. This only works for Chrome, FF, and so but not for IE. IE renders proper language just for layout which is rendered by the main request.

I located the problem. I have defined $routeProvider where I load major of the app content. It is cached by default, therefore IE doesn't load templateUrl of $routeProvider because it loads them from cache:

myApp.config(function ($routeProvider) {
        $routeProvider.
            when('/', {controller: 'MyCtrl', templateUrl: '/eshop/myConfig'})
});

What I don't get is why it works in all other browsers.

I found some post how to clear cache but they doesn't work for me. Is there any solution for me? If not, I find $routeProvider completely useless for my use case. Post I found:

Could it be because the backend is sending some cache-headers which make the browser request the templates again and again for Webkit and Firefox while IE doesn't interpret them? Reloading the app once the language changes might be a reasonable compromise. The other way maybe to turn off `$http` caching completely. — musically_ut, Nov 29 '13 at 12:01
why dont you clear out templatecache manually on click on language switcher before making http call.Use $templateCache.removeAll() — Ajay Beniwal, Nov 29 '13 at 12:29
I've tried $templateCache.removeAll() as you proposes but it doesn't help. It clears the cache but the $routeProvider doesn't even request the server for given templateUrl. It request the server again when I do refresh. So it seems the problem is somewhere else. — kuceram, Nov 29 '13 at 13:45

score 10 · Answer 1 · answered Oct 24 '14 at 08:55

Below should do it. You can manipulate angularjs's template caches by using $templateCache, so $routeProvider will load the template as new every time you access the controller.

myApp.config(function ($routeProvider) {
        $routeProvider.
            when('/', {controller: 'MyCtrl', templateUrl: '/eshop/myConfig'})
})

.controller('MyCtrl', function ($scope, $templateCache) {
    $templateCache.remove('/eshop/myConfig');
    // or
    $templateCache.removeAll();
});

score 6 · Answer 2 · answered Dec 06 '13 at 15:49

I was having the same issue with $routeProvider. And yes, the $templateCache does not help in this situation. Instead of keeping finding the real 'cache' source, I added the stamp parameter after the templateUrl. In my code:

$routeProvider.
        when('/', {templateUrl: '../views/home.html?v='+window.buildNumber, controller: 'HomeCtrll'}).
        when('/report', {templateUrl: '../views/form.html?v='+window.buildNumber, controller: 'FormCtrll'}).
        otherwise({redirectTo: '/'});

Sadly, I used a global variable "buildNumber" to save my life. Because I also use RequireJS for my AngularJS project, so this "buildNumber" will also be added to every dependency JS file by using the code:

require.config({
    urlArgs: "v=" + window.buildNumber,
    paths: {....}
});

Then every time the JS source or template html has been changed, I will only need to update that "buildNumber" in global scope. This is just a thought for the future updates in production environment. Hope this helps.

score 2 · Answer 3 · edited May 23 '17 at 10:31

So the only solution I found was to completely disable cache for ajax queries. I found the solution here: https://stackoverflow.com/a/19771501/607038

myModule.config(['$httpProvider', function($httpProvider) {
    //initialize get if not there
    if (!$httpProvider.defaults.headers.get) {
        $httpProvider.defaults.headers.get = {};    
    }
    //disable IE ajax request caching
    $httpProvider.defaults.headers.get['If-Modified-Since'] = '0';
}]);

I don't like this solution because it disable cashing for the content which is really static. So if you have better solution than share it.

Angularjs - how to clear $routeProvider's caches of templateUrl

3 Answers3

Linked