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

[subatomicglue]

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.

[clydin]

Your server needs to be configured to send the appropriate cache control headers.
If you don't have control over the server configuration, you can also look at adding meta tags to index.html.

[subatomicglue]

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

[subatomicglue]

Ok, index.html is loading off server, not cached. But now the .css and .js bundles are loading from disk cache. The problem I see in my browser is that my Loading... is on screen infinitely - the angular2 app never starts. I get no errors in the browser.

Has anyone seen this behavior with angular-cli before?

I was under the impression that the .js and .css filename was generated with file hash, to uniquify the filename, and force a load only if the code has changed. This is ideal, because we want cacheing when the code hasn't changed, for faster page load.

ideas?

[subatomicglue]

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)

[subatomicglue]

More info, this is from Chrome Network/Headers tab under Developer Tools:

/ (index.html), inline.d41d8cd98f00b204e980.bundle.js, main.710e96c682d60bc8807d.bundle.js

Cache-Control:max-age=0
Cache-Control:no-cache
Cache-Control:no-store
Cache-Control:public

styles.58e065928ed8ebd0b582.bundle.js, styles.d60e9d4f379e32123bd8c956db2f317d.bundle.css

Cache-Control:max-age=2678400
Cache-Control:public

[subatomicglue]

Tracked down the problem to this block in my nginx conf file which is intended to allow normal files through (like assets/logo.png):

  location ~ ^/(assets|bower_components|scripts|styles|views) {
    expires     31d;
    add_header  Cache-Control public;
  }

Add one / character to limit to directories, here's the change:

  location ~ ^/(assets|bower_components|scripts|styles|views)/ {
    expires     31d;
    add_header  Cache-Control public;
  }

As you can imagine, it was matching all directories AND files starting with styles, which is exactly what we were seeing above, the two styles.*.bundle.* files were being sent with caching flags on their headers!

(removing that bad hack now...) @

[subatomicglue]

Noticed that after this change, users are still having the issue with frozen at "Loading..." page. They have to manually SHIFT-reload the page. Even though the .js and .css bundles are loading with no-cache

Any other ideas?

Latest Cache-Control in Chrome Network/Headers/Response Headers for all 4 file bundles (inline/main/styles js and styles css):

Cache-Control:private,no-store,max-age=0,no-cache,must-revalidate,post-check=0,pre-check=0

[grizzm0]

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.

[grizzm0]

@subatomicglue Could you close as solved if that helped you?