How to programmatically clear cache on Angular 6 app?

Question

Just wondering - does Angular have a way of guaranteeing that the cache is cleaned for a user when they visit a site?

I have an Angular app that I occasionally push changes up to, but unfortunately users can't see those updates unless they open it in incognito. How do I fix this?

Answer 1

For controlling specific files that may change time to time, you can add a fake version parameter to the url, and change the value of the parameter.

For example: <script src="http://wwww.xxxx.com/js/my-site-script.js?version=1"></script>

When the value of the parameter is changed, the cache for that resource will be busted.

For testing, what I find useful is in the inspector (chrome / firefox at least have it), in the network tab, there is a checkbox to disable caching. When it is checked and that tab is open, you can load your page and it will not be cached. Of course this is for you when developing, not for the users of the site.

For a generic way not to cache files look int this question to see how to disable caching in the web browser: How to control web page caching, across all browsers?