7

I'm using Angular CLI to create an app.

I'd like the client browser to re-download whenever I release a new version of my app.

I assume I could do something like append ?v=1 to the URL of one of the JavaScript files in a script tag, but these tags are automatically added when I build.

Stephen Oberauer
  • 5,237
  • 6
  • 53
  • 75
  • 3
    Possible duplicate of [Force browser to clear cache in Angular environment](https://stackoverflow.com/questions/47816279/force-browser-to-clear-cache-in-angular-environment) – LLai Dec 28 '17 at 15:22

1 Answers1

6

When you use "ng build --prod" or "ng build --output-hashing=all" command angular CLI will build your app (usually in 'dist' folder) with new hashed filenames. Users browser will recognize it as new files and download new version automatically.

EDIT:
I have done a quick test on one of my older project and see the results: ng build has test

I have changed only one line in ts file and two bundle.js hashed files changed. css and vendor stayed the same. So for the browser, it will mean that it's a brand new file. It is true that if browser cache the index.html with old references will still load an old one from a cache.

I saw it somewhere that people do popup prompt there is a new version available and encourage users to refresh a page. This I guess could be done with ajax call to API to ask for the latest version and compare it with the one stored in js file - just an idea.

KrystianC
  • 422
  • 3
  • 13
  • That's not entirely correct. I have been using ng build, but I've been using the --environment=prod switch instead of --prod. Using the --prod switch creates hashed filenames, but without it they remain the same. – Stephen Oberauer Dec 29 '17 at 09:39
  • I'm not 100% sure but they will remain the same if there are no changes in the code. Once code in your app has been changed for specific file types like ts. the output hashed for that file will change. I think I saw that before. So no tall files will update hashes. Only the ones that have been touched. I will double check that because I'm curious as well. – KrystianC Jan 03 '18 at 12:13
  • Try without the --prod switch, and see what results you get. – Stephen Oberauer Jan 03 '18 at 12:39
  • Without --prod flag output files are not hashed at all (main.bundle.js, inline.bundle.js ect.). So it generates same file names and probably all files will be cached by the browser. – KrystianC Jan 03 '18 at 13:05
  • 1
    Correct, therefore can you please change the beginning of your answer to the following, and I'll mark it as the accepted answer: When you use "ng build --prod" or "ng build --output-hashing=all" command... – Stephen Oberauer Jan 03 '18 at 15:26
  • 1
    How about language json files, they are not changed and therefor requires a hard-reload. – CularBytes Apr 29 '19 at 12:11