We are facing the browser cache refresh issue.
We are using the angular 8, .net core edition of the aspnetzero framework and post deployment of a fresh build on our server, the end users need to refresh their browser to get the latest copy.
It seems changing the index.html file and setting 'no-cache' is a wrong option so has anyone figured out how can we achieve this and we need not ask the user to refresh his/ her browser everytime a fresh build is pushed.
There are quite a few solutions like re-hashing but we are not sure if that should be implemented.
We soon are going to go live and this should not happen on production server so we require a quick solution.
14 Answer(s)
-
0
I never worked this out. When you compile in angular you would expect the chunk names to change thus cache-busting, but it doesn't. In addition all of the files in the assets folder remain static so if there are changes to images it's likely you'll get the old ones. Hope that helps but if you can find a solution do post back.
-
0
Thank you for the reply but the chunk names ain't changing. Every time we deploying a fresh build(ng build --prod) we have to request the users to refresh the browser cache.
Anyone facing this issue?
-
0
Yes. Me. If you find an answer please do let me know!
-
0
Hi @sumitshah,
Did you tried https://stackoverflow.com/a/34851492 ?
-
0
@ismcagdas, yes, that's been tried. It doesn't work. I think it's more to do with webpack config but I havent looked recently. @sumitshah - did you get any further with this?
-
0
@bobingham
Thank you for the update.
-
0
My normal compile command is:
node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng build --prod=true --optimization=true --aotAnd that works fine. I follow the Angular instructions at ng-build / options / outputHashing=none|all|media|bundles To give me:
node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng build --prod=true --optimization=true --aot --output-hashing=allAnd exactly the same number of bundles are created with exactly the same names. I have to tell my users to update their cache. I currently have five customers with approx ten PC's in each site each being used by several users. It's driving me a bit crazy, how am I supposed to implement CI/CD and release several times a week when my users are seeing old versions? I don't even know what version they're getting if I want to do a major release and then have to implement a few bug fixes afterwards.... I want to move to market but without a solution to this it's practically impossible. However, given the current crisis and the fact my customers are front-line (care homes for the elderly) my move to market will be delayed a few months.... I know it's not a Zero problem but, hey, I'm reaching out, guys. Any help would be appreciated.
-
0
Hi @bobingham,
Have you tried adding below lines to index.html ?
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Expires" content="0" /> -
0
I'll try that today on a test environment and revert once done, thanks. I was trying to avoid using index.html as it will mean a full load every time the user visits the site. I suppose that's better than using the old version.
-
0
@bobingham, I hope it works. You can als try my suggestion about checking installed app version and latest version and refreshing the page. In anyway, I couldn't think another way than refreshing the page by code.
-
0
Hi @ismcagdas,
You can als try my suggestion about checking installed app version and latest version and refreshing the page. In anyway, I couldn't think another way than refreshing the page by code.
Sorry, where is that again?
-
0
@bobingham Sorry, I couldn't find my answer. I think I wrote it but didn't post.
My suggestion was like this;
Keep a version in the Angular app and write it to browsers local storage when the app first loads. During this, before writing the version to local storage, compare the app's version with the value in local storage and refresh the page if they are different.
But now, I see that, instead of keeping app version in Angular app, Angular app must read it from server and compare it with local storage value and do the refresh if they are different.
-
1
It's convoluted and subject to clearing browser history but I'll keep it in mind as a last resort. Maybe using a pipeline in DevOps may give me a better solution. Right now I'll run with
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Expires" content="0" />until I find a better method. Thanks again, your attention is appreciated.
-
0
Thanks @bobingham
Please reopen if that doesn't work for you.
