Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

After upgrading to Angular 8, production builds can't load: Failed to load module script: The server responded with a non-JavaScript MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec. #30835

Closed
kdawg1406 opened this issue Jun 4, 2019 · 35 comments

Comments

@kdawg1406
Copy link

commented Jun 4, 2019

馃悶 bug report

Affected Package Angular 8

Is this a regression? YES

Description

My production distribution is being served from Azure Blob Storage static site. Is it possible that serving from the static site is causing this error?

This issue happens in Chrome but not Edge.

After upgrading to Angular 8, production builds can't load. Browser console error: Failed to load module script: The server responded with a non-JavaScript MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec.

馃敩 Minimal Reproduction

Upgrade an Angular 7 app to Angular 8. Do production build, deploy the production build to Azure Blob storage static web site and attempt to open it.

馃敟 Exception or Error


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


馃實 Your Environment

Angular Version:




Angular CLI: 8.0.1
Node: 11.6.0
OS: win32 x64
Angular: 8.0.0
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.1
@angular-devkit/build-angular     0.800.1
@angular-devkit/build-optimizer   0.800.1
@angular-devkit/build-webpack     0.800.1
@angular-devkit/core              8.0.1
@angular-devkit/schematics        8.0.1
@angular/cdk                      7.3.7
@angular/cli                      8.0.1
@angular/material                 7.3.7
@ngtools/webpack                  8.0.1
@schematics/angular               8.0.1
@schematics/update                0.800.1
rxjs                              6.5.2
typescript                        3.4.5
webpack                           4.30.0
@spock123

This comment has been minimized.

Copy link

commented Jun 4, 2019

@kdawg1406 sounds like a server issue to me. What happens if you serve a production build yourself locally? I bet that works.

@kdawg1406

This comment has been minimized.

Copy link
Author

commented Jun 4, 2019

@spock123 thank you for your remarks. I'll try this in the morning.

@Drol

This comment has been minimized.

Copy link

commented Jun 4, 2019

Check that you are trying to load correct filenames. You are simply getting a 404 from backend and the browser cant load the 404 page as JS as a <script>

@alan-agius4

This comment has been minimized.

Copy link
Contributor

commented Jun 4, 2019

Hello, we reviewed this issue and determined that it doesn't fall into the bug report or feature request category. This issue tracker is not suitable for support requests, please repost your issue on StackOverflow using tag angular-cli.

If you are wondering why we don't resolve support issues via the issue tracker, please check out this explanation.

@alan-agius4 alan-agius4 closed this Jun 4, 2019

@kdawg1406

This comment has been minimized.

Copy link
Author

commented Jun 4, 2019

@Drol yes the correct files were being requested by name in the index.html file that the build created.

Thank you for the suggestion.

@Aurora7Sys

This comment has been minimized.

Copy link

commented Jun 7, 2019

I am not so sure this should be closed or sent off to Stack Overflow just yet.
You can reproduce this problem with a brand new version 8.02 "hello world" app generated from the CLI.
The exact same version 7 app has always worked just fine and still does up on Azure storage.
So, since there is not really anything we can do to reconfigure Azure Storege, what can we do to get Version 8 apps running up there? Something has changed that broke this capability and free hosting is a pretty good reason to use Angular. :)

Version 8 apps Do work fine on a "real" web server though.

Thanks!

@kdawg1406

This comment has been minimized.

Copy link
Author

commented Jun 7, 2019

@Aurora7Sys

I found the source of the problem. Angular 8 removed -- type="text/javascript" from the script tags in index.html. Angular 7 had them which is why it worked with Azure Storage.

We also discovered that the Azure portal manual upload did not add the MIME metadata to .js files that were uploaded. So... when I manually uploaded my Angular 8 site, it produced the above errors.

I started using Visual Studio Code to publish my Angular 8 apps to Azure Storage and it's working because the publish extension adds the correct MIME metadata to the files.

Microsoft will look into correcting the Azure portal manual upload to add the MIME metadata so this can't happen on their server.

@Aurora7Sys

This comment has been minimized.

Copy link

commented Jun 7, 2019

Thanks for the update @kdawg1406.
I was going to start digging from index.html out, but this saves a lot of time!!

@lion9

This comment has been minimized.

Copy link

commented Jun 15, 2019

Same problem here, and no obvious fix still? Prod build uploaded to Github Pages does not work too.

@kdawg1406

This comment has been minimized.

Copy link
Author

commented Jun 15, 2019

@lion9 does my above solution not work for you? How are you publishing your app to the server? I used VS Code and it solved my problem.

@lion9

This comment has been minimized.

Copy link

commented Jun 15, 2019

@lion9 does my above solution not work for you? How are you publishing your app to the server? I used VS Code and it solved my problem.

I tried to upload it to Github Pages, no luck. It seems that it does not matter, which tool I am using - Webstorm or VS Code - it won't work :-( See here - https://lion9.github.io/test/

@kdawg1406

This comment has been minimized.

Copy link
Author

commented Jun 15, 2019

@lion9 understand. Full disclosure, my solution worked for me because the VS Code Extension that performs the upload to the Azure Blob Storage applied the correct metadata to the .js files.

Angular 8 does publish the .js files differently. If you compare an Angular 7 index.html with the Angular 8 index.html the scripts at the bottom of the file are different. Angular 7 .js files have the type="text/javascript" where the Angular 8 index.html script files do not add this.

Angular 7
<script type="text/javascript" src="runtime.26209474bfa8dc87a77c.js"></script>

I believe this is the root of the problem, Recommend contacting GitHub and ask them how you can apply the required metadata to the files.

Maybe you can try and add the type="text/javascript" to the script tags that don't have a type attribute? If I remember correctly half of the files have the attribute, the others don't.

Best regards, Karl

@nj-coder

This comment has been minimized.

Copy link

commented Jul 2, 2019

This issue is posted on Stack Overflow , but no resolution yet, thanks!

@Erayus

This comment has been minimized.

Copy link

commented Jul 3, 2019

I got the same problem when I host the files on AWS S3. The problem is from the "type='module'", I had to manually change it into "type='text/javascript'" to make it work again.

Why "type='module'" in Angular 8, I'm wondering? What is the benefit of it over "type='text/javascript'" ?

@kdawg1406

This comment has been minimized.

Copy link
Author

commented Jul 3, 2019

@Erayus I think it has something to do with getting a modern browser to load the file instead of the other version of the file.

I would reach out to the Angular team, you may be causing a problem.

The server metadata needs to be applied to the files, and they will load correctly.

I do think Angular needs much better docs and testing to explain to developers how to deploy Angular 8 apps.

@Erayus

This comment has been minimized.

Copy link

commented Jul 4, 2019

@kdawg1406 Thank you very much!

@hwangzhiming

This comment has been minimized.

Copy link

commented Jul 8, 2019

try browerslist

@mxmlbernard

This comment has been minimized.

Copy link

commented Jul 8, 2019

Same issue when packaging with Electron, seems to be resolved by setting type="text/javascript" instead of type="module".

@btey

This comment has been minimized.

Copy link

commented Jul 12, 2019

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

@zanate4019

This comment has been minimized.

Copy link

commented Jul 16, 2019

@btey I don't see anything in the link you provided that suggested target should be es5. Instead the example there shows es2015 (which is es6).

@danielgadz

This comment has been minimized.

Copy link

commented Jul 18, 2019

I solved it by creating a task in gulp, I share the steps:

  1. npm install --save-dev gulp
  2. npm install --save-dev gulp-replace
  3. create in the root of the project a file with the name:
    gulpfile.js
  4. copy the code in the gulpfile.js:
const { src, dest } = require('gulp');
var replace = require('gulp-replace')

exports.default = function (cb) {    
    src(['dist/ng-project/index.html'])
        .pipe(replace('type="module"', 'type="text/javascript"'))
        .pipe(dest('dist/ng-project/'));
    cb();
};
  1. In the packaje.json file, modify the "electron" script as follows:
    "electron": "ng build --base-href ./ && tsc --p electron && gulp && electron ."
  2. run your project: npm run electron

note: In the main electron file, make sure you go to the dist folder of your index.html file
Ejemplo:

win.loadURL(url.format({
        pathname: path.join(__dirname, `/../../dist/ng-project/index.html`),
        protocol: "file:",
        slashes: true
        })
    );
@aripp

This comment has been minimized.

Copy link

commented Jul 23, 2019

That is a webserver related problem. Angular 7 did include a MIME type in the tags in index.html:
<script type="text/javascript" src="runtime.26209474bfa8dc87a77c.js">

Angular 8 does not include a MIME type in <script> tags in index.html:
<script src="runtime-es2015.703a23e48ad83c851e49.js" type="module">`

<script src="runtime-es5.465c2333d355155ec5f3.js" nomodule>

It's there fore up to the webserver what MIME type is returned when the browser does retrieve the .js file.
In my case Internet Explorer and Edge could load the app, Firefox and Chrome did refuse to open the app with error "Failed to load module script: The server responded with a non-JavaScript MIME type of "text/x-js". Strict MIME type checking is enforced for module scripts per HTML spec."

The solution was to add a .htaccess file into the root directory of the app on the apache webserver to force the server to deliver .js files as MIME type "text/javascript".
Content of .htaccess:

# Force MIME Type text/javascript for all .js files
# Needed for Angular 8 since type="text/javascript" is not specified anymore in <script> tags in index.html
AddType text/javascript .js

@rcketscientist

This comment has been minimized.

Copy link

commented Jul 24, 2019

@alan-agius4

Why is this closed? This is a regression. ng7 created a proper index.html. At least in some situations, ng8 does not. I have not seen a single "solution" that was not a work-around for an ng8 flaw and unrelated to the consumer's code. ng8 should not be creating ambiguous script tags.

@MeltedPixel

This comment has been minimized.

Copy link

commented Jul 27, 2019

You should be defining your output browser support inside the browserslist file. In this case for the lack of support in modern browsers you should be adding something like:

Chrome >= 70 and Chrome <= 75

Adding this inside your browserslist should add support for chrome and chromium based applications.

For additional information you can see this github repo. It has a list of other options for inside the browserslist https://github.com/browserslist/browserslist

@rcketscientist

This comment has been minimized.

Copy link

commented Jul 27, 2019

Tried that one off SO, no luck. I'll give it a second shot on Monday since this is the second time I've seen it.

@itaiRoded2

This comment has been minimized.

Copy link

commented Aug 6, 2019

Same issue, It's seems like ng8 issue and not something that can be fixed on the node side

@simonua

This comment has been minimized.

Copy link
Contributor

commented Aug 7, 2019

While this only treats the symptom, you can opt out of differential loading to buy you some time to deal with the problem.

We use ADO build pipelines to drop files into blob storage running static website and fronted with a CDN, so I may be looking at just running a custom post-copy PS script again like in the earlier days to apply correct mime types.

@jrosseel

This comment has been minimized.

Copy link

commented Aug 8, 2019

+1

@keelerjr12

This comment has been minimized.

Copy link

commented Aug 18, 2019

Still no solution to this problem??

@Wolfleader101

This comment has been minimized.

Copy link

commented Aug 20, 2019

Still no solution to this problem??

the easy solution
just replace target with es5 in tsconfig,json

"target": "es5",

@adamdport

This comment has been minimized.

Copy link

commented Aug 29, 2019

This issue affects anyone using Cordova, as Cordova ultimately serves up files via the file:// protocol. I can't change my "server" to serve up the js files as text/javascript afaik as there is no server. There's an issue on Cordova's github, but I don't know that it's anything the Cordova team can resolve.

Does anyone know if there's any support for the file:// with javascript modules?

@Arno-v

This comment has been minimized.

Copy link

commented Sep 1, 2019

I use a c++ webserver derived from https://github.com/eidheim/Simple-Web-Server . You can easily create a fast c++ REST server with this, which will serve your angular client. When you request a file it just sends the file. No processing. So if there is no MIME metadata in the file, it will not add it. I don't understand why this issue is closed. Adding the MIME metadata seems simple enough. And if it is inconvenient there should be an option.

@peter-snr

This comment has been minimized.

Copy link

commented Sep 4, 2019

NGINX configuration was failing even with mime types loaded from /etc/nginx/mime.types.

Eventually after some digging, removing one option at a time, I managed to trace the option that was causing the MIME types errors I was getting in the console. Commented it out and viola content was displayed fine.

`
# This option cause issues with Angular served applications
#          add_header X-Content-Type-Options nosniff;
`

Hope it helps someone

@letanloc1998

This comment has been minimized.

Copy link

commented Sep 6, 2019

I have same problem, does anyone help me, please, thank you very much

@wkande

This comment has been minimized.

Copy link

commented Sep 9, 2019

btey had the fix for building with electron. Change the target in tsconfig.json to es5. Thanks btey

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can鈥檛 perform that action at this time.