Search code examples
angularcachingbrowser-cachecache-controlangular7

How to prevent Browser cache on Angular 7 site?


I have a web application in a production environment. The users are using it every day, when I publish an update and a user comes back to the web application he/she views the old version of the web application. He needs to refresh the browser to load the new version. How can I solve this problem? I cannot tell hundreds of users to refresh the page every time I publish an update (3-4 times a week). I have used following to build my front end application: Angular7 with angular-cli.


Solution

  • ng build --aot --output-hashing=all
    

    This makes a hash that must match the server side. If the cached version of the front end is not the same as the hash, they get a new version of the app. This assumes you are using the standard way of building using the angular CLI.

    If you aren't, you could always try something hackish like the following (untested)

    @Component({
    templateUrl: './app/something/something/something.html?v=' + Math.random()
    stylesUrls: ['./app/something/something/something.html?v=' + Math.random()]
    })