Clear browser cache in Angular

Question

I have a problem with an Angular application that I update very often.

I would like to avoid the browser cache and I am trying several alternatives but none of them work.

The first thing is that I have very difficult to test if the solution works because when I upload a new version, sometimes I see it without having to do more than refresh the page, and other times I need to open the console and force the refresh emptying cache.

I tried to include in the request header, Cache-Control: no-cache, as you can see in the image, but that does not work for me.

I have also tried, put in the app.component.ts

templateUrl: './app.component.html? v1'

as I have seen in some answers, but neither.

The truth is that I'm desperate because when I give something that I think works, when I check it with my boss he does not refresh it :-( , and the bad thing is that as I say I do not know how to really check that really, every time I enter the web, the latest version is requested from the server.

Thank you for your help

Answer 1

When you are building the application using ng build, you should use the following flag:

--outputHashing=all

This is to enable cache-busting. This adds a hash to every single built file such that the browser is forced to load the latest version whenever you have uploaded a new version to your servers.

Threfore, one way to do it would be to run this:

ng build --prod --outputHashing=all

You may read more about the build options flags over here.

If you do not wish to append the flags when you run ng build, you should set it on your configurations at the angular.json file.

"configurations": {
  "production": {
    "optimization": true,
    "outputHashing": "all",
     .
     .
     .
  }
}