Angular2 force/hard reload of browser cached scripts?

Question

I know that there are a lot of posts about that in web, but none of them satisfied me. Most of people recommends appending a verizon number to each script/css file. But this sound like a lot of job to me (project is qute bit), maybe there is some way to version only output files, some CLI command I dont know?

My solution was based of simple pinging to API for new version number, when > than stored then reload the page. And here is a tricky part - even location.reload(true) does not refresh the cached angular stuff. Manually CTRL+SHIFT+R does this job nicely. This would be good enough for me if the programmaticly hard reload would work.

I also tried a this.compiler.clearCache(); but also with no effect.

Thanks in advance! :)

Maihan Nijat · Accepted Answer · 2019-06-11 19:59:57Z

5

The @angular/cli does the cache busting for you. It appends the hash to script/css file names if you run the ng build with the --prod flag.

edited Jun 11, 2019 at 19:59

Maihan Nijat

9,36313 gold badges69 silver badges117 bronze badges

answered Apr 10, 2018 at 10:45

Tomasz Kula

16.9k3 gold badges72 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Roman Dużynski Over a year ago

Thx! This would be perfect, but I m currently facing a problem "JavaScript heap out of memory" whe try build with --prod flag. I will try some workaround to increase the max RAM amount for build. Or maybe U know some?

Roman Dużynski Over a year ago

Found a solution for max heap exception. Seems like I have to use a long command since we are using VSTS for auto deployment thus I cant just edit ng files. 'node --max_old_space_size=4096 node_modules/@angular/cli/bin/ng build --prod ' Indeed I see a guid appended to files. Hope this will help me. Thx again!

Chirag Ravindra · Accepted Answer · 2018-04-10 10:53:45Z

2

EDIT: If you are using the angular-cli, the @Tomasz's answer is probably better than the methods listed below.

Ideally you would use a module bundler like Webpack or a task runner like Grunt to automatically 'fingerprint' your files (ie, append a unique identifier to the file name based on it's contents).

But if that is not an option, a simple hack would be to :

set the caching headers on your HTML to avoid caching on the browser
Append a random query parameter to your script tag URLs in your HTML which you can change each time you want a new version.

<script src='/js/some.js?v=1.1.3'></script>

Changing the random query parameter (v in the example) will ensure the browser makes a fresh request as the URL is different than the cached (older) version

edited Apr 10, 2018 at 10:53

answered Apr 10, 2018 at 10:41

Chirag Ravindra

4,8301 gold badge27 silver badges38 bronze badges

Collectives™ on Stack Overflow

Angular2 force/hard reload of browser cached scripts?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related