How to force index.html to be loaded from server in any browsers using Angular 2 code if it was cached

Question

Currently I am hosting an Angular 2 application on Apache 2.4 web server and in client's browser latest website changes are not rendered after new production deployment! I found that index.html is cached by the browser. All css and angular bundle file linking can be done on index.html,so it is entry point of the application. We have thousands of active users so we cannot insist them to press CTRL+F5 or do hard reload.

I have checked with different ways of production build (for example, Thread1, Thread2), index.html also contains following meta tags already.

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">

Using angular code, I have checked with cache busting by query param and also followed up a good practice to use module.id in each component as well.

@Component({
    ...
    moduleId: module.id,
    ...
})

So my question is,

1. In this situation, how do I force browser to load new index.html using Angular 2 code in all user's machine? - If it is possible then please let me know about how do i cope up with this issue.

Your help will be appreciated!

Answer 1

The problem is not the index.html, as Andoni said, you can add an autogenrate random prefix on the bundle files names.

You can archived it, with the command:

ng build —output-hashing all

More options here:

https://angular.io/cli/build