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.

[ghost]

🐞 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]

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

[ghost]

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

[Drol]

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]

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.

[ghost]

@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]

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!

[ghost]

@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]

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

[lion9]

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

[ghost]

@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]

@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/

[ghost]

@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 issue is posted on Stack Overflow , but no resolution yet, thanks!

[raymondht]

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'" ?

[ghost]

@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.

[raymondht]

@kdawg1406 Thank you very much!

[hwangzhiming]

try browerslist

[mxmlbernard]

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

[btey]

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]

@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]

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();
};

5. In the packaje.json file, modify the "electron" script as follows:
   "electron": "ng build --base-href ./ && tsc --p electron && gulp && electron ."
6. 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]

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]

@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]

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]

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]

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

[simonua]

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]

+1

[keelerjr12]

Still no solution to this problem??

[iabutler]

Changing the type attribute on the script tags in the compiled index.html file fixes this for me, but adds an additional step to the deployment for Google App Engine (for reference NGINX and apache serve correctly without issue). Prior versions of angular built and deployed to GAE without issue.

[mihirsoni781]

Yes, that may be one of the solution, I prefer https://stackoverflow.com/a/63207836/14033778 here you don't need any additional steps.

…

On Sat, Aug 1, 2020 at 9:43 PM iabutler ***@***.***> wrote: Changing the type attribute on the script tags in the compiled index.html file fixes this for me, but adds an additional step to the deployment for Google App Engine (for reference NGINX and apache serve correctly without issue). — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#30835 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AMHE6SRNRNDYLJ2WSJAWNFLR6Q5LRANCNFSM4HSYDBKQ> .

[Amitesh]

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
        })
    );

It helped to me.

[rezonant]

@Amitesh as noted elsewhere, if you are running into this on Electron this is expected as the file:// protocol does not convey mimetypes to the Chromium engine. The recommended solution for Electron is to implement a custom protocol, which is more reliable and does not require any changes/patches to your build output. It also gives you other benefits as file:// is quite restricted within browser engines.

For more information about this, see the Electron docs. You can find folks discussing this solution (and an example custom protocol) at electron/electron#12011 (comment)

[jsvb1977]

If you are using DotNetCore 3.1, make sure app.UseSpaStaticFiles(); is in Startup.cs.

[Amitesh]

Thanks @rezonant
I am using vanilla Angular 8 framework in browser.

[DavidMaarek]

Does anyone have any idea where the Angular 7 to Angular 8 change is where the type="text / javascript" is no longer added? So that we can propose a Merge Request to fix this?

[will-hu-0]

responded

Yes, this resolved my issue for running Angular 8 project into Nginx docker container.
My tsconfig.json's target is es2015.
By removing --base-href ./ from my build script resolve the issue!

[memartinez06]

In my case, I had the same problem publishing an Angular 9 application on an IIS 8 server. The error only occurred on the customer's machine and not on mine. The reason was this: In my machine I published the application indicating in the baseRef that it would be inside a folder myFolder within the Site. In the case of my customer, he did not create the folder within an existing site, but instead created the folder and a new site that points directly to it. The solution in my case was to generate the publish without specifying the baseRef (just ng build --prod).

In short, the error is that the server cannot locate the project files according to how it was compiled.

[tapansam]

I also have the issue (using NGINX as an ingress in my Kubernetes cluster).
Does someone have any ideas?

I am also facing the same issue with my angular app deployed in AKS with nginx container and ingress enabled.

[yacinase06]

We have also this problem with Nginx ingress enabled on AKS

[Abhirup-99]

Changing the type attribute on the script tags in the compiled index.html file fixes this for me, but adds an additional step to the deployment for Google App Engine (for reference NGINX and apache serve correctly without issue). Prior versions of angular built and deployed to GAE without issue.

can you share the script which does this? Thanks in advance.

[agiratech-vigneshm]

I struggled with this issue for a whole day and finally, it was some infra issue with Kubernetes. I don't have details at the moment, but when it happens to you, don't think it is just your angular code issue. This can occur from different layers. I'll update this post about what went wrong in K8 once I got the post-mortem from our ci team.

[FCE-tc]

I've been having this problem for a few days now. (Angular 10)

_Package Version

@angular-devkit/architect 0.1000.1
@angular-devkit/build-angular 0.1000.1
@angular-devkit/build-optimizer 0.1000.1
@angular-devkit/build-webpack 0.1000.1
@angular-devkit/core 10.0.1
@angular-devkit/schematics 10.0.1
@angular/cdk 10.0.1
@angular/cli 10.0.1
@angular/flex-layout 10.0.0-beta.32
@angular/material 10.0.1
@angular/material-moment-adapter 10.1.2
@ngtools/webpack 10.0.1
@schematics/angular 10.0.1
@schematics/update 0.1000.1
rxjs 6.6.0
typescript 3.9.6
webpack 4.43.0_

No changes to server config.
No changes to code.

This is what happened:

1. Build with no errors, Push code to server: working correctly.
2. Next, I installed Flutter, Android Studio and Visual Studio 2019 (everything needed to run Flutter).
3. Go back to my Angular project in VS Code, try to push same branch as 1, get the error that is in this title of this bug.

I got my co-worker to build and push the exact same branch, works fine.
I compared my co-workers build and my build:

Two of the built js files were different:

1. main-es5xxx.js
2. main-es2015xxx.js

I tried uninstalling Flutter, Android Studio, Visual Studio 2019, uninstalling and reinstalling nodejs, tried downloading WebStorm and building from, nothing worked.

What did work was changing the type="module" in the scripts in the index.html file, but what I am concerned about is why those 2 js files are different from my co-workers build.

[Chris1234567899]

@FCE-tc
Very strange, the same happened to me today after installing Visual Studio (even if I never used it for my angular 8 project).
No changes in code or Server or whatsoever.
Also, manually changing type="module" to type="application/javascript" in the built index.html solved it for me.

Something odd is going on here...

[FCE-tc]

@FCE-tc
Very strange, the same happened to me today after installing Visual Studio (even if I never used it for my angular 8 project).
No changes in code or Server or whatsoever.
Also, manually changing type="module" to type="application/javascript" in the built index.html solved it for me.

Something odd is going on here...

I ended up getting around this by using Actions in Git to build and deploy the Angular app.
When building via Git Actions, the js files are compiled correctly with no issues.

So I'm guessing this is an issue that is related to Visual Studio and its install files.

[Chris1234567899]

@FCE-tc
Not sure if Visual Studio had something to do with it in the end, but finally I could fix it, updating the HKEY_CLASSES_ROOT in the registry (I'm on Windows, see this answer: https://stackoverflow.com/a/61165265/3719922).
In the registry, it was set as text/plain. I updated it to application/javascript.

Since I am working with AWS S3 for hosting, I could directly verify in their console that the mime type is now correct for .js files, which was not the case beforehand.

Maybe this helps someone.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}