Angular 8 ng-build throwing MIME error with cordov

问题:

While executing ng build --prod --base-href ./ for building my cordova app, the final output throws an error as below.

Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.

I did end up fixing this by changing type module to text/javascript

src="runtime-es2015.858f8dd898b75fe86926.js" type="module">

src="runtime-es2015.858f8dd898b75fe86926.js" type="text/javascript">

Is there something that can be done within angular.json file to fix or am I missing out something here?

回答1:

I had the same issue.

1. Created a new project.

2. Built a production version

     "build-production": "ng build --configuration=production --extract-css=false --prod --aot"
   

3. Deployed to NGINX

4. White page with no content between tags in Chrome Element inspector

Fix

Update tsconfig.json

        "target": "es5",

Then rebuild the application and deploy again.

This solution worked for me, I now have content in my deployed app.

Hope it helps somebody

回答2:

I have this same issue (similar) when creating an angular / electron app.

I follow the steps here:

https://alligator.io/angular/electron/

and I just get a blank (white) screen when I run the electron app. When you inspect the app with dev tools, you get a handful of error messages in the console like:

Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.

These appear on all the JS includes that are present in the dist/index.html file.

I have to manually go through all the script tags (like this):

<script src="runtime-es2015.858f8dd898b75fe86926.js" type="module">

and change them to include a mime type:

<script src="runtime-es2015.858f8dd898b75fe86926.js" type="text/javascript">

Only then does it work inside the electron window. If I run project using "ng serve", though, and look at the webpage served up by angular, then it works just fine.

I think it's something to do with files being loaded locally from the file system and not providing a mime type, while when they are served from a webserver, a mime type is provided.

回答3:

You must change the property "target" in the file "tsconfig.json" to "es5". Read this blog entry, "Differential Loading by Default":

https://blog.angular.io/version-8-of-angular-smaller-bundles-cli-apis-and-alignment-with-the-ecosystem-af0261112a27

This property chooses between modern or legacy JavaScript based on the browser capabilities:

<script type="module" src="…"> // Modern JS

<script nomodule src="…"> // Legacy JS

回答4:

I managed to get my Electron application working (with Angular 8) by modifying the browserlist file within the root directory. As with your post, I too was having issues with Mime Types.

I added Chrome >= 70 and Chrome <= 72 to the file given the latest Chromium instance in Electron is 72. Seemed to do the trick.

Edit: I do realize you are using Cordova and I don't quite know what that is built on (e.g. Chromium). In this case, try modifying your browserlist to reflect earlier versions of browsers. You might find the queries necessary to achieve this here: https://github.com/browserslist/browserslist

Hope this helps. Gave me quite the headache.

回答5:

Never used Cordova, but encountered the same issue with Nginx. The solution I implemented (without the regression proposed by accepted solution): add "module" to MIME types. See related question