Angular app has to clear cache after new deployment

Issue

We have an Angular 6 application. It’s served on Nginx. And SSL is on.

When we deploy new codes, most of new features work fine but not for some changes. For example, if the front-end developers update the service connection and deploy it, users have to open incognito window or clear cache to see the new feature.

What type of changes are not updated automatically? Why are they different from others?

What’s the common solution to avoid the issue?

Solution

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

Answered By - Joel Joseph