Angular Serving Assets as MIME ('text/html')

Question

Whenever we release a new version of our Angular App, the page will not load for users unless they clear their cache. It just keeps our loader spinning forever and is stuck on index.html.

In the chrome console there is an error saying that styles.css-hash has a MIME type of ('text/html') and that it is not a supported stylesheet MIME type. Note that I have also seen this happen with javascript files, including the main.js-hash from angular.

If we shift-click refresh or ctrl F5 to clear cache it loads the new styles.css-newhash and the page will load.

I have the stylesheet referenced in the angular.json (we are using angular 7) and not in the index.html.

Note most other questions similar to this suggest changing to relative pathing in the angular.json or to not reference the linked files in the index.html and to instead reference them in the angular-cli.json or the angular.json. Neither of these solutions worked.

We are not using the angular service worker.

Answer 1

It's the webserver, not Angular. Since the #hash has changed, the previous file does not exist anymore.

The webserver is most likely showing a Page not found also known as 404 page, which has a mime of text/html, since it's a webpage.

You need to clear the cache on cache services like Cloudfront / Fastly / Varnish etc. if you have any.

You could also add no-cacheheaders to the page, but this is not recommended, it's better to set a lesser cache time than standard, depending on your release / update frequency.

You should really remove the #hash part from production files, to not have this problem on production servers. Then the cached files will work until they are cleared, and the new ones will kick in.

Answer 2

As you mentioned it happens sometimes with your css and sometimes with your js files.

It might be that it's a problem with how your server is configured and your index.html file is being cached. On deploying a new version, you might be getting the old index.html file(unless user clears cache), and hence fetching the previous hash versions of css/js files, which of course are not there anymore.

So the web server responds with 404 and some Not Found content html type.