33

I am working on an AngularJS app with several directives. The directive's templates are stored in a separate html file. When editing these template, my browser does not detect any changes after a reload and always uses a cached version. Any other changes to the source code are detected and lead to a reload.

I guess the problem is somewhat the $templateCache which seems to be used by AngularJS when loading the template.

What I found in the source code of AngularJS 1.0.2 is the following from line 4317 which is part of the compileTemplateUrl():

$http.get(origAsyncDirective.templateUrl, {cache: $templateCache})

I am wondering if anyone else had this kind of problem and if there is a way to tell AngularJS when to cache and when not.

3 Answers 3

40

I know this is an old question, but here's a simpler fix, although it's a bit of a hack, it works for me, and doesn't require you to do anything to $templateCache.

Whenever I run into this problem (I see it in directive templates, but also static JSON files), I add a query parameter to the end of the URL being loaded, like this:

...
templateUrl: "partials/template.html?1",
...

Whenever I make a changes to the template, and it's not reloading, I increment that number at the end. As the browser doesn't know if this might mean something special to the server, it should attempt to reload that changed URL whether it's cached or not. This will also make sure the file is reloaded in the production environment.

2
  • 7
    And if you have many templates you can use a variable var v = "1"; $routeProvider.when('/', { templateUrl: '/pages/home.html?v=' + v, controller: 'HomeCtlr' });
    – dpineda
    Commented Jan 2, 2015 at 16:03
  • 1
    "partials/template.html?" + Date.now() worked perfectly for me.
    – mhodges
    Commented Jun 27, 2017 at 16:08
15

The template cache is stored in your browser, as this is a javascript app. You can actually feed the $cache manually or stop your browser from caching the templates (as it would seem that for production, cache won't be a problem), using developer tools.

For force feeding the cache:

function Main($cache) {
    $cache.data['first.html'] = {value: 'First template'};
    $cache.data['second.html'] = {value: '<b>Second</b> template'};

}

Main.$inject = ['$xhr.cache'];​

See it working in this fiddle.

To stop your browser from caching the templates (cited from this Google Groups post, about this problem, exactly):

My team and I have ran into this same issue. Our solution for development while using Chrome was to open Developer Tools, and select the gear in the bottom right hand corner. Then select Network - Disable cache.

This fixed all our partial/template caching issues.

4
  • 14
    It does not really solve my problem to disable caching in chrome for my local chrome version as user that browse the website still load the cached version.
    – F Lekschas
    Commented Nov 20, 2012 at 15:35
  • 2
    (Sorry for double comment but I couldn't edit it anymore...) Forcing the cache to reload the template everytime looks like a hack for me. But I guess I have no choice. Disabling caching in chrome for my local chrome version solves the problem only for me. Other visitors that browse the website still load the cached version. Updates in production mode are thus not visible until the user clears their cache.
    – F Lekschas
    Commented Nov 20, 2012 at 15:41
  • Well, I use Yeoman for my angularJS projects, so the files deployed have their names hash prefixed. That makes cache not really an issue, as any fundamental changes to the app are instantly recognized (the files are differently named). For testing, I use Yeoman as well, and it forces a reload of all the assets. Commented Nov 20, 2012 at 18:20
  • I wanted to play around with Yeoman but haven't had the time so far. Maybe it's a good time to go for it :)
    – F Lekschas
    Commented Nov 20, 2012 at 19:05
1
app.controller('someCtrl', function ($scope, $cacheFactory, templateRequest)
{   
    $scope.refreshTemplate = function ()
    {
      var tpl = "<template name>";
      $cacheFactory.get('templates').remove(tpl);
      $templateRequest(tpl).then(function ok(){
          console.log("Template "+tpl+" loaded.");
      });
     }
   ...
  }

then when you call the refreshTemplate function you cause a re-load

1
  • I don't know why this is not the accepted answer... Works as expected...
    – Scriptlabs
    Commented Sep 30, 2016 at 7:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.