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

Answer 1

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