How to make sure javascript and css is cached in Angular app

Question

I am reasonably new to angular (5), and have noticed that the javascript files (vendor.bundle, main.bundle, etc) are being reloaded each time I visit a page.

Is there anything in particular I should be doing to make sure that these are held in a browser cache after the first time they are loaded?

I guess I would need to add a cache-control header, but am not sure where to put it in the code, or whether this is something that the Angular-Cli could generate

If you build you app for production, it will use the browsers default cache. If you are using the live development server, it reloads every time, as it should as you are making constant changes to it. — ForestG
– ForestG, Commented Mar 26, 2018 at 8:25
Well the build adds a hash to the filename, which should invalidate any caching issues, but my problem is that the files do not appear to be being cached at all whether built in prod or dev modes — jazza1000
– jazza1000, Commented Mar 26, 2018 at 8:30
I think it is completely up to your browser's options. Are you sure your browser is not set to ignore caches? One other thing I found is disabling output hashing (--output-hashing) (github.com/angular/angular-cli/wiki/build) which can provide the same results, maybe you are using a build tool that calls it when building? — ForestG
– ForestG, Commented Mar 26, 2018 at 8:34
No, output hashing is enabled, and I think my browser setup is pretty normal — jazza1000
– jazza1000, Commented Mar 26, 2018 at 8:39
how did you make sure the browser is not using the cached version? — David
– David, Commented Mar 26, 2018 at 8:40

El Ghandor Yasser · Accepted Answer · 2018-10-16 13:14:04Z

2

Angular have lib called Service workers, which simply can be installed in cli project by below cli command

      ng add @angular/pwa --project *project-name*

Note: project name can be obtained from angular.json

This command do the most required configuration but still some other stuff is needed, Which can be found on the flowing link service-worker confi. but some of this configuration already done by previous mentioned command. but also more configuration may be needed in "ngsw-config.json" file.

But unfortunately i tested this inside spring war and still the big files still downloaded every time without any caching but if i deployed on http server direct it work perfect.

Inside Spring War Result

For More Info. Please Check the blob of Angular Service Worker - Step-By-Step Guide for turning your Application into a PWA

edited Oct 16, 2018 at 13:14

answered Oct 14, 2018 at 12:08

El Ghandor Yasser

3845 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to make sure javascript and css is cached in Angular app

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related