Disable caching on the client side in Angularjs

Question

I have an issue with the way that I deploy my angularjs application.

Every time that I am deploying my app, my users are experiencing cache issues. Their browsers save the old version of my application and the result it's a lot of errors.

I saw one possible solution for this problem, just to add version number after each css and js files. something like this:

<script src="bower_components/angular/angular.js?version=2.3"></script>

and replacing the version every deploy.

I don't want to do that for every file that I am adding.

Does someone have a better solution?

Thank you.

Whats your story? How come you come to that conclusion? This version of your problem really doesn't help people to help you with an answer... — deostroll, Feb 07 '17 at 14:25

score 1 · Accepted Answer · answered Feb 07 '17 at 16:12

You should not add a version to your bower src, bower should mange it for you, exmaple:

under bower_components/angular/.bower.json:

{
  "name": "angular",
  "version": "1.5.11",
  "license": "MIT",
  "main": "./angular.js",
  "ignore": [],
  "dependencies": {},
  "homepage": "https://github.com/angular/bower-angular",
  "_release": "1.5.11",
  "_resolution": {
    "type": "version",
    "tag": "v1.5.11",
    "commit": "0f57428c3ffe2f486264ab7fbee3968dccc7b720"
  },
  "_source": "https://github.com/angular/bower-angular.git",
  "_target": "~1.5.1",
  "_originalSource": "angular"
}

And in the index just

<script src="../bower_components/angular/angular.js"></script>

Complete example - bower-angular.

If you just want to disable cache :

myModule.config(['$httpProvider', function($httpProvider) {
    //initialize get if not there
    if (!$httpProvider.defaults.headers.get) {
        $httpProvider.defaults.headers.get = {};    
    }    

    // Answer edited to include suggestions from comments
    // because previous version of code introduced browser-related errors

    //disable IE ajax request caching
    $httpProvider.defaults.headers.get['If-Modified-Since'] = 'Mon, 26 Jul 1997 05:00:00 GMT';
    // extra
    $httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache';
    $httpProvider.defaults.headers.get['Pragma'] = 'no-cache';
}]);

But this is inside angular module config. What if I want to disable the cache on the entire index.html scripts? — Yair Cohen, Feb 07 '17 at 16:43
.config is the first block that got executed in angular - it effects all http requests. — Itsik Mauyhas, Feb 08 '17 at 13:23
I know that. but in index.html file I didn't load yet the angular file. I want that the http requests that done by index.html will be without cache, and not the angular app's http requests. — Yair Cohen, Feb 11 '17 at 17:09
What did you show in file under bower_components/angular/.bower.json — IndexOutOfDevelopersException, Nov 08 '17 at 12:34

score 0 · Answer 2 · answered Feb 07 '17 at 14:16

0

I don't know what your server stack is but I use ASP.NET. I use the assembly's build string as the querystring. So it looks something like this

<script src="bower_components/angular/angular.js?version=@ViewBag.AppVersion"></script>

where AppVersion is a string that looks like this: '1.0.0.12645'.

answered Feb 07 '17 at 14:16

Victor P

1,267
13
23

it seems logical to add a version tag to your url. If you do not know or have any way to alter your server stack, you can always load your js dynamically in development phase http://stackoverflow.com/a/912713/2143734 and add use a src tag with an explicit version at the end of your js file names once your script is released – Zzirconium Feb 07 '17 at 14:23

Disable caching on the client side in Angularjs

2 Answers2