Cache Busting when deploying new angular-cli (angular2) app to production Nginx server

Please provide us with the following information:

OS?

Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)

Running on AWS.

Ubuntu 16.04.1 LTS (GNU/Linux 4.4.0-36-generic x86_64)
Nginx/1.10.0 (Ubuntu)
Chrome Version 55.0.2883.95 (64-bit)
Safari Version 10.0.3 (11602.4.8.0.1)

Versions.

Please run ng --version. If there’s nothing outputted, please run in a Terminal: node --version and paste the result here:

angular-cli: 1.0.0-beta.21 node: 7.0.0 os: darwin x64

Repro steps.

Was this an app that wasn’t created using the CLI? What change did you do on your code? etc.

ng build -prod gives me a driectory that looks like this:

.                                                  inline.d41d8cd98f00b204e980.bundle.js              main.d55402e0a3445d5fdc2a.bundle.map
..                                                 inline.d41d8cd98f00b204e980.bundle.map             styles.58e065928ed8ebd0b582.bundle.js
assets                                             main.d55402e0a3445d5fdc2a.bundle.js                styles.58e065928ed8ebd0b582.bundle.map
index.html                                         main.d55402e0a3445d5fdc2a.bundle.js.gz             styles.d60e9d4f379e32123bd8c956db2f317d.bundle.css

Which I push to the server at AWS.

The log given by the failure.

Normally this include a stack trace and some more information.

Whenever I push this code to production server, all our users get an infinite loading screen.
To fix they need to hold down SHIFT while hitting refresh button, presumably clearing the cache and getting the fresh copy.

I suspect that the index.html is cached from last time, and that the .css and the .js files being included from that old index.html are pointing at the old names which are generated with a filehash to uniquify the name…

css and js Lines from my index.html:

<link href="styles.d60e9d4f379e32123bd8c956db2f317d.bundle.css" rel="stylesheet">
...
<script type="text/javascript" src="inline.d41d8cd98f00b204e980.bundle.js"></script><script type="text/javascript" src="styles.58e065928ed8ebd0b582.bundle.js"></script><script type="text/javascript" src="main.d55402e0a3445d5fdc2a.bundle.js"></script>

Mention any other details that might be useful.

Is there a way for index.html to auto reload if the js or css files fail to load? Or to output a helpful error to the user to hit CTRL-R or SHIFT-reload?

Thanks! We’ll be in touch soon.

Issue Analytics

State:
Created 7 years ago
Reactions:5
Comments:13 (4 by maintainers)

Top GitHub Comments

13reactions

subatomicgluecommented, Feb 1, 2017

Well, here’s a HACK that works (for my case). It certainly isn’t very general!

<!-- reload if angular2 doesn't start in a reasonable amount of time -->
<script> type="text/javascript">
window.setTimeout(function() {
  if (window.MY_APP_IS_RUNNING == undefined)
    location.reload(true);
}, 5000);
</script>
<!-- end - reload if angular2 doesn't start in a reasonable amount of time -->

And then in app.module.ts I set the variable:

export class AppModule {
  constructor(){
    // so that index.html can detect we started up (if it doesn't detect, then it'll reload)
    window['MY_APP_IS_RUNNING'] = true;
  }
}

And it actually worked, it broke my frozen loading... screen after 5 seconds into the actual app.

Downside of this (HACK) is that if on [slow connection, slow hardware, other unforeseen slowness], the loading screen could get into an infinite reload loop (a bad thing). Possible idea could be to back off the timer, 5000, 7000, 15000, etc… to give it a chance. (still not ideal)

12reactions

subatomicgluecommented, Feb 1, 2017

Thanks!

To help internet searches on this topic, Here’s what I ended up with:

In index.html:

  <meta http-equiv="cache-control" content="no-cache, must-revalidate, post-check=0, pre-check=0">
  <meta http-equiv="expires" content="0">
  <meta http-equiv="pragma" content="no-cache">

In Nginx conf /etc/nginx/conf.d/default.conf:

server {
  //  ...
  location / {
    try_files $uri $uri/ /index.html =404;
    expires       0;
    add_header    Cache-Control  public;
    add_header    Cache-Control  no-store;
    add_header    Cache-Control  no-cache;
  }
  //  ...
}

Top Results From Across the Web

Angular app has to clear cache after new deployment

Cache -busting solves the browser caching issue by using a unique file version identifier to tell the browser that a new version of...

Avoid cache trap when serving Angular app - Elad Elram

Avoid Angular cache issues caused by cached inxed.html. Make sure your users get the latest version of your app.

Service worker in production - Angular

Whenever a new build of the application is deployed, the service worker ... a "cache-busting" URL parameter to prevent browser or intermediate caching....

My Nginx configuration for Angular | by Gareth Erskine-Jones

A working Nginx configuration for a basic Angular app, with sensible caching ... caching, and because Angular employs cache-busting in its production builds ......

Assets & caching - Infinum

In such cases, the Angular application has to be build with baseHref and deployUrl builder options set to /web/ (it is / by...