Angular 8 ng-build throwing MIME error with cordova

Question

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?

dev mode works fine in desktop. Issues comes when trying to load to a device using cordova. — Nidhin Joseph, Jun 15 '19 at 02:54
Issue is raised in git, but not resolved. https://github.com/angular/angular/issues/30835 — Nidhin Joseph, Jul 02 '19 at 23:15

englishPete · Accepted Answer · 2019-09-03T14:05:34.760

21

I had the same issue.

Created a new project.

Built a production version

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

Deployed to NGINX
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

edited Sep 03 '19 at 14:05

answered Sep 01 '19 at 13:53

englishPete

809
10
15

24

This is not a solution but a workaround. ES5 is legacy. – Panos Filianos Jan 18 '20 at 22:45
1

So whats the differnce betwwen es5 and es2015 ? – Farhad Nov 27 '20 at 03:58

score 10 · Answer 2 · edited Aug 29 '19 at 16:58

10

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.

edited Aug 29 '19 at 16:58

adamdport

11,687
14
69
91

answered Jun 24 '19 at 18:30

John

109
3

yep, the issue still exists. I'll raise this in GitHub and post the link here to follow up. – Nidhin Joseph Jun 24 '19 at 21:23
do you have a GitHub issue for this? – ToM Jun 24 '19 at 21:51
Has anyone tried disabling differential loading to fix this issue? – ToM Jun 25 '19 at 07:04
1

Unfortunately for cordova I haven't found better solution then to use in tsconfig.json: "target": "es5" and then another script that adds type to script tags. – ToM Jul 01 '19 at 19:39
1

@ToM the issue was in git, but not resolved. https://github.com/angular/angular/issues/30835 – Nidhin Joseph Jul 02 '19 at 23:14

score 8 · Answer 3 · answered Aug 01 '19 at 13:02

8

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

answered Aug 01 '19 at 13:02

Ameen Rashad

514
6
17

13

While this technically resolves the error, it's equivalent in quality to saying "just don't use angular 8". It's not the answer most of us are looking for. – adamdport Aug 29 '19 at 17:01

score 2 · Answer 4 · answered Jan 23 '20 at 20:52

2

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

answered Jan 23 '20 at 20:52

score 1 · Answer 5 · answered Jun 25 '19 at 22:15

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.

Didn't do anything in my case. – Anthony Jul 24 '19 at 11:39 — Anthony, Jul 24 '19 at 11:39

score 1 · Answer 6 · answered Apr 21 '20 at 19:52

Had the same issue not with Cordova but with an express app. It turned out when I did the ng build in angular 8, it created the files under a new directory with the app name. So when I ran ng build I got dist/<app-name>.

When I tried to run the app in the express server I only updated the path to my index.html. For eg:

app.get('*', (req, res) => {
   res.sendFile(path.join(__dirname, 'dist/<app-name>/index.html'));
});

and my index.html had these lines <script src="runtime-es2015.js" type="module"></script> which again tried to load the index.html instead of the .js files and hence I got the error.

The fix that I did was to update the location of the public directory which served my javascript and css files . For eg:

app.use(express.static(path.join(__dirname, 'dist/<app-name>')));

R. de Ruijter · Answer 7 · 2020-12-01T14:00:40.740

1

This issue has be solved in your proxy.

Therefore the question is, what kind of proxy are you using?

If you are using Nginx. You have to configure the Nginx proxy like this:

http {
    types {
      module js;
    }
    include       /etc/nginx/mime.types;
    # rest of your config...
}

Found the solution here.

edited Dec 01 '20 at 14:00

answered Dec 01 '20 at 13:49

R. de Ruijter

513
5
13

Angular 8 ng-build throwing MIME error with cordova

7 Answers7

Linked

Related