Solvedangular cli 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.

14 Answers

✔️Accepted Answer

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;
  }
  //  ...
}

Other Answers:

There was a bug until beta 24 or 25 where the hash of inline.js wasn't changed and thus not busting the cache while the main/vendor.js was busted. This resulted in the app trying to load the old no longer existing files included in the cached inline.js.

Please update to latest beta. 21 is quite old.

More Issues: