Stop caching in Angular.js

Question

for some reason all my html seems to be 100% cached in chrome.

I am using angular 1.2 with a .net web api 2 project and my content is served in index.html.

I haven't made any changes to the cache policy yet, but it seems to cache very heavily.

None of the changes that I make (in the views) are reflected until I clear the browser cache.

I do not see new changes after pressing f5 or after publishing my site on the server and running f5. I must either explicitly clear the browser cache, or open the console with the disconnect "without caching when the developer tools are open."

I want users not to clear their browser cache when deploying new versions.

Answer 1

Since no one is trying to connect, I will post a solution that I implemented, which works, but may be better

IIS:

http features > http response headers > set custom headers > Expire Web Content: Immediately (if you don't see http features, you'll have to add the feature to your iis server) 

index.html

 <meta http-equiv="CACHE-CONTROL" content="NO-CACHE"> <meta http-equiv="CACHE-CONTROL" content="NO-STORE"> (these may cause issues in older versions of IE) 

this works, but I'd rather balance the caching between releases better.

An alternative approach would be to use a build tool such as Grunt and generate unique file names for your scripts in production and update links in index.html. This would be the best approach that I believe, since full caching will be enabled, and the browser will always request a new version of the files, as the names will be unique. (I also saw people adding v = 666 files to files, but from what I read, this is not a reliable approach)

Also, if you serve content from .Net pages (instead of the base .html), you have the option to use the Bundler, which manages tags between releases.

 bundles.Add(new ScriptBundle("~/bundles/angular").Include("~/Scripts/angular/angular.js") .Include("~/Scripts/angular/angular-route.js")); 

this will lead to

 <script src="/bundles/angular?v=20LMOimhsS0zmHdsbxeBlJ05XNyVXwPaS4nt3KuzemE1"></script> 

Update

In addition, I also added a version parameter to the template. This prevents caching, but it can completely prevent caching, so do some checks if you go this route

 <div data-ng-include=" 'app/import/import-summary.html?v=' + appVersion "></div> 

appVersion can be a global variable set in app.js

 app.run(['$route', '$rootScope', function ($route, $rootScope) { $rootScope.appVersion = getBuildVersion(); // this can be read from assembly file version or any other place where versions are generated by your build server }]); 

Answer 2

I found that I have the same problem periodically with my server.

In most cases, 80% of the code that I click on the production server has no problems. However, a new module reference, a new Angular binding, or even the smallest template editing may require several updates to really clear the cache and show the latest updates.

In fact, I wrote an expression about resolving 7 points to express my complaints and hope that someone will have the same problem as me. I ended up deleting the question, as I was afraid that it was only my experience.

I found a strange workaround where, if I host a site from the terminal by running the "npm start" or "http-server" modules on my machine, a constant update between my development and production server will force the browser to confirm both environments and force the change either appear in one environment, or both.

In my opinion, there are two types of developers: modular and linear asynchronous.

Modular programmers encode large chunks, and then download all the efforts of the code that minimize heavy caching.

Asynchronous programmers like to see every change they make, coding a couple of lines, downloading small changes, and then updating the browser to see their latest progression.

I am definitely an asynchronous programmer. I find that this allows me to catch smaller errors, as well as understand the inner workings of which language I use.

Is it possible to say that asynchronous programming leads to heavy browser caching, which leads to the problem that we all have on this particular issue?

I am pleased to share your blind disappointment, as this has been my biggest problem ever since I studied at Angular.

At first glance, this may seem like a small problem, however, when studying Angular, you can spend hours or even a couple of days recoding the same 30 lines, because there were no changes in your browser. This is a very dangerous, invisible problem that can lead to a lot of time spent on development time.

Answer 3

Maybe this is just in your browser case. For development purposes, you can use the Chrome Chrome browser. Use ctrl + shift + N after opening chome, it will open incognito browser.