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

This is i did for angular: https://stackoverflow.com/questions/55402751/angular-app-has-to-clear-cache-after-new-deployment/61473275#61473275 — Alejo JM, Apr 28 '20 at 05:49
This is i did for angular: https://stackoverflow.com/questions/55402751/angular-app-has-to-clear-cache-after-new-deployment/61473275#61473275c — Alejo JM, Apr 28 '20 at 05:50

score 47 · Answer 1 · answered Apr 04 '19 at 13:53

47

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",
     .
     .
     .
  }
}

answered Apr 04 '19 at 13:53

wentjun

40,384
10
95
107

1

Thanks a lot , but I have it in my angular.json and I don't know it :-( `"configurations": { "production": { "optimization": true, "outputHashing": "all", "sourceMap": false, "extractCss": true, "namedChunks": false, "aot": true, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true, "fileReplacements": [ {` but I see all my build documents with a long and strange name.... – Ulises 2010 Apr 04 '19 at 14:14
1

@Ulises2010 I just re-read your question, and I realise that your boss doesn't refreshes his browser? In that case, there is nothing both of us can do. This is because if the leaves the window on and doesn't do anything (such as closing it or refreshing it), it will still be running the previous version. The only way for the browser to fetch the updated built files would be to refresh it.. – wentjun Apr 04 '19 at 14:56
1

Thank you very much @wentjun. I have not explained myself well, I do not speak English well. My boss returns to visit the page that had already closed, or otherwise, refreshes the page with the browser button, but he do not see the changes. I have to tell him to press F12 and then he can right click on the same button and he can do an 'Empty cache and force reload' (Maybe it's not exactly like that, my browser is in Spanish) – Ulises 2010 Apr 05 '19 at 07:00
If your boss not closing the application or refreshing it, go with some api calls and check the latest version if any, in that case, you can clear the cache and refresh the page. but you have to call api often to check the latest version – Sridhar Paiya Jul 19 '19 at 09:13
It looks like the option has been changed to --output-hashing=all – Phil Jollans Aug 13 '22 at 11:20
Seems like we use it already but sometimes we still face caching issue. Any better solutions? – Harshal Yeole May 31 '23 at 18:45

score 5 · Answer 2 · edited Jan 31 '21 at 11:42

5

Try [window.]location.reload(true):

if (localStorage.getItem('refreshed') === null) {
    localStorage['refreshed'] = true;
    window.location.reload(true);
} else {
    localStorage.removeItem('refreshed');
}

According to w3schools:

By default, the reload() method reloads the page from the cache, but you can force it to reload the page from the server by setting the forceGet parameter to true: location.reload(true).

edited Jan 31 '21 at 11:42

ghchoi

4,812
4
30
53

answered May 28 '19 at 04:06

KLMN

529
4
13

5

Thanks a lot @KLMN It can be a good solution, but is being a SPA and should not be reload, and if I put it to do it automatically when it loads, it is continuously reloading :-( – Ulises 2010 May 28 '19 at 07:28
3

location.reload(true) is depreciated now. – Malachi Bazar Mar 10 '21 at 15:09
window.location.reload(true) not going to clear the cache. – CodeMind Feb 03 '22 at 06:56

score 3 · Answer 3 · edited Jun 26 '21 at 04:08

I also update my app daily, I use this to notify the user that the app is out-dated and request for the page to be refreshed.

constructor(
    private swUpdate: SwUpdate,){

    public checkForUpdates(): void {
    this.updateSubscription = this.swUpdate.available.subscribe(event => this.promptUser());

    if (this.swUpdate.isEnabled) {
      // Required to enable updates on Windows and ios.
      this.swUpdate.activateUpdate();
      interval(300000).subscribe(() => {
        this.swUpdate.checkForUpdate().then(() => {
         console.log('checked for updates');
        });
      });
    }}

    // Important: on Safari (ios) Heroku doesn't auto redirect links to their-
    //https which allows the installation of the pwa like usual
    // but it deactivates the swUpdate. So make sure to open your pwa on safari
    //like so: https://example.com then (install/add to home)
    
      }

      promptUser(): void {
        this.swUpdate.activateUpdate().then(() => {
          const snack = this.snackbar.open('A New Update Is Available Click To 
          Reload', 'Reload');
          snack
            .onAction()
            .subscribe(() => {
              window.location.reload();
            })

  
 

       });
      }

score 0 · Answer 4 · answered Sep 09 '19 at 20:49

0

You can force page reload with the following command:

window.location.replace('/path');

answered Sep 09 '19 at 20:49

RexRod

51
1
3

Clear browser cache in Angular

4 Answers4

Linked

Related