Base solution for your next web application
Open Closed

Cache busting - Angular 8 #8427


User avatar
0
sumitshah created

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)
  • User Avatar
    0
    BobIngham created

    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.

  • User Avatar
    0
    sumitshah created

    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?

  • User Avatar
    0
    BobIngham created

    Yes. Me. If you find an answer please do let me know!

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @sumitshah,

    Did you tried https://stackoverflow.com/a/34851492 ?

  • User Avatar
    0
    BobIngham created

    @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?

  • User Avatar
    0
    ismcagdas created
    Support Team

    @bobingham

    Thank you for the update.

  • User Avatar
    0
    BobIngham created

    My normal compile command is:

    node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng build --prod=true --optimization=true --aot
    

    And 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=all
    

    And 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.

  • User Avatar
    0
    ismcagdas created
    Support Team

    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" />
    
  • User Avatar
    0
    BobIngham created

    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.

  • User Avatar
    0
    ismcagdas created
    Support Team

    @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.

  • User Avatar
    0
    BobIngham created

    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?

  • User Avatar
    0
    ismcagdas created
    Support Team

    @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.

  • User Avatar
    1
    BobIngham created

    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.

  • User Avatar
    0
    ismcagdas created
    Support Team

    Thanks @bobingham

    Please reopen if that doesn't work for you.