Angular MIME issues in Edge

Question

I'm running into an issue with Angular where if I ng serve and deploy on localhost, the page loads fine. However if I use ng build and deploy remotely, I then get a MIME error,

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

This only occurs on Edge, but is still a notable issue. The only differing factor I can find is when viewing the compiled source code, the local deployment has the following data in its HTML document,

<script src="runtime.js" type="module"></script><script src="polyfills.js" type="module"></script><script src="styles.js" type="module"></script><script src="vendor.js" type="module"></script><script src="main.js" type="module"></script></body>

Where the remote deployment has this,

<script src="runtime-es2015.js" type="module"></script><script src="runtime-es5.js" nomodule defer></script><script src="polyfills-es5.js" nomodule defer></script><script src="polyfills-es2015.js" type="module"></script><script src="styles-es2015.js" type="module"></script><script src="styles-es5.js" nomodule defer></script><script src="vendor-es2015.js" type="module"></script><script src="vendor-es5.js" nomodule defer></script><script src="main-es2015.js" type="module"></script><script src="main-es5.js" nomodule defer></script></body>

I'd think the solution would be to deploy with runtime.js rather than runtime-es2015.js, but I'm unclear on how to modify those parameters. Any feedback is appreciated.

Answer 1

I'm presuming you're using a subfolder for the deployed app e.g. www.example.com/appfolder/

If that's the case the you need to set the base-href during the build process: ng build --prod --base-href appfolder