3

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!

Rakshit Shah
  • 428
  • 4
  • 13
  • I know apache's default is index.html but can you change the filename and Apache's default like you would cache-bust others? `index1234.html` – Ben Racicot Jun 15 '19 at 13:04
  • @BenRacicot, Thank you for replying. If I rename bundle name or index.html while new deployment, it is still taking index.html from disk memory of the browser. So do we have any control in angular 2, using that I can force index.html to load from server? – Rakshit Shah Jun 15 '19 at 14:15

2 Answers2

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

jcmordan
  • 948
  • 12
  • 19
  • Thank you for replying, but my situation is similar as described in this thread: https://stackoverflow.com/a/1207563/4420586 . As you said, hashing pattern is applicable on main / vendor / inline etc..files but not on index.html, and browser cached that index.html by their own. Entry point to application creates the caching issue! – Rakshit Shah Jun 15 '19 at 14:34
  • Ohh now a get it. Since the index.html is cached always the cliente is getting the same with outdated bundles references? That’s it? Buy are you sure, when deploy your are deleting all the previous files ? – jcmordan Jun 15 '19 at 14:38
  • Yes I stop apache 2.4 http server, deleting all the files and deploy new dist (created with prod command), after that I start that server. but client browser cache creates an issue, it is not force to load latest index.html file! – Rakshit Shah Jun 15 '19 at 14:41
0

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)

Andoni
  • 151
  • 9
  • If I use cache buster strategy as shown on this thread https://stackoverflow.com/a/39671383/4420586 , after implementing the same i am not able to load index.html (loaded in client's browser) - and this file does not have hashing pattern or generated unique name each time. So is there any way, where I can force user to load new content from web server without refreshing the page? – Rakshit Shah Jun 15 '19 at 14:26