Menu
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?
810
To prevent visitors from being served with an older, cached version of the file, which might lack some translation, you can employ a cache-busting functionality. This entails attaching a unique version identifier to the file, which ensures that a fresh version is fetched, instead of a stale, cached version.
angular/cache is used as a base directory to store cache results. To change this path to .cache/ng , run the following command: content_copy ng config cli.
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.
GET requests can be cached. They just get data from the server without changing them. If no POST , PUT , or DELETE request occurs before the next GET request, the data from the last GET request does not change. We simply return the previous data or response without hitting the server.
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
Updates
For the newer version of angular ( for example Angular 10) the command is now updated :
ng build --prod --aot --outputHashing=all If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
