CODEWITHSUNDEEP
angularangular-cli
Ashish Chauhan
Ashish Chauhan

Reputation: 536

Angular4 always require Browsers Cache Clean

I have a web application in production environment. The users are using it every day, when I publish an update and a user comes back to the web application he/she views the old version of the web application. He needs to refresh the browser to load the new version. How can I solve this problem? I cannot tell hundreds of users to refresh the page every time I publish an update (3-4 times a week). I have used following to build my front end application : Angular4 with angular-cli

Upvotes: 18

Views: 23329

Answers (4)

SAli
SAli

Reputation: 11

For npm use the following below : Angular 7 +

RUN npm run build -- --prod --output-hashing=all

Upvotes: 1

Beachhouse
Beachhouse

Reputation: 5052

This is also handy if you are having cache issues using

ng build --watch

Change your command to:

ng build --watch --output-hashing=all

This will cache bust all your js by hashing the js names.

Upvotes: 0

Amit kumar
Amit kumar

Reputation: 6147

The best way to clean browser cache would be to use hashing at build time. command to add hashing in angular cli app is 

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

It will generate build file with different name each time we build.

Just in case you are not using angular cli you can declare you component this way to cache busting

@Component({
  selector: 'some-component',
  templateUrl: `./app/component/stuff/component.html?v=${new Date().getTime()}`,
  styleUrls: [`./app/component/stuff/component.css?v=${new Date().getTime()}`]
})

Also we can set cache expire time in our nginx server. run this command

sudo nano /etc/nginx/sites-available/default

to edit config file & add these line to set cache settings

location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
  expires 3d;
}

this will set expire time to 3 days. so the browser will automatically delete all stored cache of your web app & download fresh copy.

jpg|jpeg|png|gif|ico|css|js <-- configuration will cache jpg/jpeg/png/gif/ico images as well as javascript

Upvotes: 18

eflat
eflat

Reputation: 1019

As noted in the angular-cli docs, there are 2 ways of enabling cache busting.

  1. --prod or --target=production will set a number of flags, including --output-hashing=all which is what triggers the cache-busting
  2. You can also set --output-hashing itself on the command line with one of its possible values of [none|all|media|bundles]. This is useful for testing/staging builds.

Upvotes: 3

Related Questions