Angular App Has to Clear Cache After New Deployment

Angular app has to clear cache after new deployment

The problem is When a static file gets cached it can be stored for very long periods of time before it ends up expiring. This can be an annoyance in the event that you make an update to a site, however, since the cached version of the file is stored in your visitors’ browsers, they may be unable to see the changes made.

Cache-busting solves the browser caching issue by using a unique file version identifier to tell the browser that a new version of the file is available. Therefore the browser doesn’t retrieve the old file from cache but rather makes a request to the origin server for the new file.

Angular cli resolves this by providing an --output-hashing flag for the build command.

Check the official doc : https://angular.io/cli/build

Example ( older versions)

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

Below are the options you can pass in --output-hashing

none: no hashing performed
media: only add hashes to files processed via [url|file]-loaders
bundles: only add hashes to the output bundles
all: add hashes to both media and bundles

Updates

For the version of angular ( for example Angular 8,9,10) the command is :

ng build --prod --aot --outputHashing=all

For the latest version of angular ( from angular 11 to angular 14) the command is reverted back to older format:

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

Cache busting on Angular

I think that's a browser's cache issue.

What I suggest is to add these three lines in your index.html:

<!doctype html>
<html>
  <head>
    ...

    <!--  Add the 3 following lines -->

    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="expires" content="-1">

    ...
  </head>
  <body>
    ...
  </body>
</html>

Once these updates got deployed, your clients wont have to ctrl + f5 after every deployment to get the new features.

For more informations about browser cache control, please check : Cache-Control in MDN.

Angular - Changes are not shown in production until customer refresh the page or cleaning cache

pls try ng build --prod --aot --base-href=./ --outputHashing=all

for more pls refer Angular app has to clear cache after new deployment

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

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.

Clear angular cache in .angular folder

You can configure caching options of cli in angular.json file. One of options is cache which gives you the option of disabling it.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "cli": {
    "cache": {
      "enabled": false
    }
  },
  "projects": {}
}

You can disable it by running this command too:

ng config cli.cache.enabled false

To clear the cache on Unix-based operating systems:

rm -rf .angular/cache

To clear the cache on Windows:

rmdir /s /q .angular/cache

Update (10th, Aug 2022):

For Angular 14 and up, you can now clear, enable and disable cache config by running these commands:

clean

ng cache clean

// Deletes persistent disk cache from disk.

disable

ng cache disable
ng cache off

// Disables persistent disk cache for all projects in the workspace.

enable

ng cache enable
ng cache on

You can find out more about it in docs.

Angular App Has to Clear Cache After New Deployment