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

user_4420586 0
Viewed 2007

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!

angular2-template angular
2 Answers

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

user_26243600

You are enforcing the browser to get the new version of the HTML page, but if you are generating the latest version of the bundle with the same name, your new HTML will end up with the old js and CSS files.

A common practice is to modify the bundle name with some autogenerate code to ensure the new version of the HTML and the old one request for different files. (cache buster)

user_6393330
Related