stop caching views in Angular.js

Question

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

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

I did not make any cache policy changes yet, but it seems to be caching everything very heavily.

none of the changes i make (to the views) are reflected until i clear browser cache.

I don't see new changes after pressing f5 or after publishing my site to the server and doing f5 on that. I have to either explicitly clear browser cache, or keep console open with "no caching while dev tools are open" setting on.

I want to prevent asking users to clear their browser cache when new versions are deployed.

Answer 1

Since noone is chiming in, i'll post the solution I implemented, which works, but could 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 prefer to strike a better balance of caching between releases.

Alternative approach would be to use a build tool such as Grunt, and generate unique filenames for your scripts in production and update links in index.html. This would be the best approach I believe, because full caching would be enabled, and browser would always make the request for new version of files since the names would be unique. (I've also seen people append ?v=666 to files, but from what i've read this is not a reliable approach)

Also if you're serving content from .Net pages (instead of basic .html) you have an option of using Bundler which does manage tags between releases.

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

this will result in

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

update

additionally I've also been adding a version parameter in template includes. This prevents caching, but it may prevent caching completely so do some testing if you go that 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 have found I have the same issue intermittently with my production server as well.

In most instances, 80% of the code that I push to the production server has no problems. However, a new module reference, a new Angular binding, or even the smallest template edit can take several refreshes to actually clear the cache and show the latest updates.

I actually wrote a 7 paragraph question slash statement to air my grievances and hoping someone had the same issue as myself. I ended up deleting the question, as I feared it was just my experience.

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

In my opinion, there are two types of developers: modular and line-by-line asynchronous.

Modular programmers code in large chunks and then upload the entire code effort which minimizes heavy caching.

Asynchronous programmers like to view every single change they make by coding a couple of lines, uploading the small changes and then refreshing the browser to see their latest nuance of progression.

I am definitely an asynchronous programmer. I find it allows me to catch smaller mistakes as well as understand the inner workings of whichever language I am using.

Is it safe to say that asynchronous programming leads to heavy browser caching, which is leading to the problem we are all having on this particular question?

Glad to share in your blind frustration, as this has been a huge problem of mine, ever since I've been dabbling in Angular.

It may at first glance appear to be a small issue, however as you are learning Angular, you may spend hours or even a couple of days recoding the same 30 lines because there was no change in your browser. This is a very dangerous, invisible issue which can lead to large amounts of time being chipped away for development time.

Answer 3

May be its just in your browser case. For development purpose you can use chrome's incognito browser. Use ctrl+shift+N after opening chome, it'll open incognito browser.