Browser sees old version of Angular app after new version is deployed, even after clearing cache

Question

I have an Angular 11 app that I'm building for deployment in production with the following commands:

npm install
npm run build -- --prod --outputHashing=all

The problem I am having is that, once deployed, when I go the app's URL with my browser, I still see an older version of the application.

I initially thought this was a cache issue, even though I was compiling with the --outputHashing=all option (it seems to be working from what I can tell, the output files in the dist folder have seemingly random filenames). And it seemed to be the case: if I refresh the page after disabling the cache in Chrome's dev options it now shows the updated app.

However, here is the problem: if I close the browser and open it again... I go back to seeing the old app! So, clearing the cache seems to somehow be a temporary solution.

After further investigation, my suspicion is that it has something to do with angular's service workers, since when I load the page with Chrome's dev tools open I can see a lot of network calls are marked as Served from service worker.

However, I'm not enough of an expert in Angular to know how to diagnose further. I've read the documentation about service workers on angular's website, but it didn't help me in figuring out where the problem lies exactly. Can anyone point me in the right direction? Here is my service worker config file, it was automatically generated when the application was created. Let me know if there are other files I should provide:

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

If it makes any difference, the app is hosted inside a .NET Core service running the embedded Katana webserver, but it don't see how that would make any difference, it's just serving the files without further manipulation.

Pippo

Have you found any solution for this problem sir? – Parapsychology

Did you find any solution on the above issue? I am facing same issue in my app too – Margerymarget

Answer 1

Even file names are all hashed, it couldn't help a lot. The only way is just do Ctrl + Shift + R for hard refreshing or whatever hard refreshing is the only way, in javascript, location.reload() is the function.

Good thing is we have PWA (Service worker) can detect all changes of your site, on your browser.

Just add ng add @angular/pwa then you will be get integrated with service worker.

And just detect changes using it.

This code to app.component.ts

  hasUpdate = false;

  constructor(
    private swUpdate: SwUpdate,
  ) {
  }

  ngOnInit(): void {
    // check for platform update
    if (this.swUpdate.isEnabled) {
      interval(60000).subscribe(() => this.swUpdate.checkForUpdate().then(() => {
        // checking for updates
      }));
    }
    this.swUpdate.available.subscribe(() => {
      this.hasUpdate = true;
    });
  }

  reloadSite(): void {
    location.reload();
  }

When there is hasUpdate is true you can show some alert message to user, and when user select that message you can call function location.reload

<div *ngIf="hasUpdate">
  <button (click)="reloadSite()">Reload</button>
</div>

This is the best way to handle this cache problem.

Enshrine