Our Angular app works correctly after deploying to staging, but the same build breaks when deployed to production. The page loads, yet the application fails until our SRE team purges the CDN cache. The browser reports errors such as "Failed to load module script" and "Refused to apply stylesheet" because the resources are being returned with a MIME type of text/html. I suspect production is serving a stale index.html that still references older JavaScript or CSS bundles, but I'm not sure whether the root cause is index.html caching, CDN configuration, deleted assets, or something else. What should I investigate first, and what is the best way to prevent this?
3 Answers
The MIME type error usually means the browser requested a JavaScript or CSS file but received an HTML error page instead, commonly a 404 response. A likely sequence is that a cached index.html points to an old bundle, the old file has been removed from the origin, and the CDN returns the app’s HTML fallback for that missing path. Set a very short TTL or no-cache policy for index.html, while allowing fingerprinted bundles to be cached for a long time.
Also account for users who already have the application open during a deployment. Angular can lazy-load chunks later, and an old tab may request a chunk from the previous release after those files have been deleted. Keep assets from recent deployments available at the origin for a day or two, and handle chunk-load failures with a controlled one-time reload. Hashed assets plus a fresh index.html and retained previous bundles usually prevent this entire class of failure.
Check whether your generated JavaScript and CSS filenames include content hashes. If every deployment uses the same filenames, cached assets can easily get mixed with a newer index.html. Hashed filenames let each build use unique URLs, so browsers and CDNs can safely cache the bundles for a long time.
That makes sense. I’ll compare the cached index.html with the current build and check whether the CDN is returning the application fallback for missing asset paths.