Force browser to clear cache in Angular environment

javascript angular caching cache-invalidation
Phil picture Phil · Dec 14, 2017 · Viewed 26.4k times · Source

There is a popular question on how to force-clear the cache of the browser in a VanillaJS application, with the general consensus being, setting the name of the .js-script or the scripts arguments to a new value: Force browser to clear cache

How can I achieve this with Angular (currently 5.1 in AngularCLI/Webpack build), so every time I release the code in production (with AOT), a new version is built? I would use date-hashing instead of indexing, but the main question is: where can I set it (eg the script name/arguments)? In development, where the CLI takes care of rebuilding the app, this is not an issue, just in production!

Answer

LLai picture LLai · Dec 14, 2017

By setting your build command to target production ng build --target=production, the cli automatically hashes your js files. Here are the docs You can also set the command manually if you wanted it on dev ng build --output-hashing=all

Related questions

Can't bind to 'ngModel' since it isn't a known property of 'input'

I've got the following error when launching my Angular app, even if the component is not displayed. I have to comment out the <input> so that my app works. zone.js:461 Unhandled Promise rejection: Template parse errors: Can't …

Read More
Angular: conditional class with *ngClass

What is wrong with my Angular code? I am getting: Cannot read property 'remove' of undefined at BrowserDomAdapter.removeClass ... HTML <ol class="breadcrumb"> <li *ngClass="{active: step==='step1'}" (click)="step='step1; '">Step1</li&…

Read More
(change) vs (ngModelChange) in angular

Angular 1 does not accept onchange() event, it's only accepts ng-change() event. Angular 2, on the other hand, accepts both (change) and (ngModelChange) events, which both seems to be doing the same thing. What's the difference? which one is best for performance? …

Read More