2

It's being really annoying to develop in Firefox under the AngularJS framework. Why? Because you just refresh and the JavaScript is reloaded, but that's not the case for the HTML many times. So each time you change a single bit in the template, you have to manually clear the cache to be sure that the changes are being applied.

Any idea about why Firefox/Angular is doing that, and how to prevent it?

I tried also the 'Hard Refresh' extension (https://addons.mozilla.org/en-US/firefox/addon/hard-refresh/?src=search) in order to make things easier, and also the Ctrl + F5 combination, but even this is not enough to really refresh the page. The only way I found so far is via the preferences menu, in the privacy tab, selecting (only) the cache to be cleared.

DanielM
  • 1,106
  • 3
  • 17
  • 27

2 Answers2

2

Both Firefox devtools and Firebug have an ability to temporarily disable caching.

If you're using full-featured web server for development, you can disable cache from the server side, so you're not limited to debugger panel.

Estus Flask
  • 206,104
  • 70
  • 425
  • 565
  • 1
    Not sure about how to do that from the server side. With Angular you don't have real control over the templates loading, do you? Anyway I live with the devtools open almost all the time, you know? So I think this will be already good enough. Thanks! – DanielM Apr 23 '15 at 09:23
  • Which server are you using? No, Angular only controls template caching until the page is reloaded (not your case) – Estus Flask Apr 23 '15 at 09:27
  • IIS. (And I need more characters to post it...) – DanielM Apr 23 '15 at 09:31
  • Yes, they wouldn't call it 'dev tools' for nothing... I've not tried it with IIS, but it is should be quite easy, as with other webservers. I guess it can be done with either GUI or web.config on IIS: http://www.iis.net/configreference/system.webserver/staticcontent/clientcache – Estus Flask Apr 23 '15 at 09:58
  • Well, it was a good attempt, but after some tries I'm just having the same problems again, and only can see the good, updated templates after manually clearing the cache as I described. I'll try from the server as soon as I can (that doesn't mean necessarily soon, though). – DanielM Apr 23 '15 at 12:28
  • I come with a new fact... I still have the problem when developing in localhost. So, the server is not the problem at all. I would like to add that after a while playing with it I can definitely confirm that your solution is not working for me, sorry. – DanielM Apr 25 '15 at 16:54
  • Unless you're using the browser with strange caching politics (and afaik Firefox isn't one of them), the problem is always on server side, i.e. localhost. Here's an example of 'good' development-friendly headers from Firebug http://oi62.tinypic.com/2dv7qdy.jpg , you have to check your own headers on the templates. – Estus Flask Apr 25 '15 at 17:07
0

Did you try to use $templateCache to clear it, on your app.run function add the following code:

$rootScope.$on('$viewContentLoaded', function() {
      $templateCache.removeAll();
});
Aleksandar Gajic
  • 1,349
  • 1
  • 18
  • 23
  • $templateCache is not persistent, it won't have any effect between page reloads (though it may be useful for F5-less template development, in conjunction with other cache-disabling techniques). – Estus Flask Apr 23 '15 at 08:53