Angular app has to clear cache after new deployment

by

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

More Related Contents:

  1. based on mobile number how do i get country code in javascript or anguler 2+ [duplicate]
  2. How do I return the response from an Observable/http/async call in angular?
  3. How to load external scripts dynamically in Angular?
  4. Property ‘…’ has no initializer and is not definitely assigned in the constructor
  5. Angular 5 Service to read local .json file
  6. Angular: Can’t find Promise, Map, Set and Iterator
  7. Wait for multiple promises to finish
  8. How to check whether is empty? (in Angular 2+ till now)
  9. Angular2 component’s “this” is undefined when executing callback function
  10. Angular 2: TypeError: l_thing0 is undefined in [{{thing.title}} in AppComponent@4:44]
  11. Load existing components dynamically Angular 2 Final Release
  12. Angular 6: HTML table create dynamic columns and rows
  13. How to make a disabled reactive form Editable in Angular2
  14. Firestore Timestamp.fromDate not UTC
  15. Angular 5 Scroll to top on every Route click
  16. How to handle window scroll event in Angular 4?
  17. Angular 2 – How to pass URL parameters?
  18. execute a function when *ngFor finished in angular 2
  19. How to cancel a subscription in Angular2
  20. Correct way Provide DomSanitizer to Component with Angular 2 RC6
  21. Angular 2 typescript invoke javascript function
  22. What is Angular 4 and from where I can learn more about it?
  23. How to use onBlur event on Angular2?
  24. Angular 6: ERROR TypeError: “… is not a function” – but it is
  25. Angular interceptor exclude specific urls
  26. How to iterate using ngFor loop Map containing key as string and values as map iteration
  27. Angular why asterisk (*)
  28. How to check empty object in angular 2 template using *ngIf
  29. How can I apply a quantity limit to *ngFor? [duplicate]
  30. Custom Validator on reactive form for password and confirm password matching getting undefined parameters into Angular 4

Leave a Comment