Angular-cli: MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

[mohibrahimm]

This is the issue I'm getting

Angular CLI: 1.7.2
Node: 8.9.4
OS: win32 x64
Angular: 5.2.5
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.7.2
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.1
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.5.3
webpack: 3.11.0

Deploy files to to server
Service Worker caches all the files
Deploy updated files to server
Get this error on refresh after deploying updated files: Refused to execute script from Refused to apply style from
'https://martmax.co/martmax/styles.90e231a43b112dde0a8e.bundle.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Refused to execute script from 'https://martmax.co/martmax/inline.42eab311bb328d4389bc.bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
martmax.co/:1 Refused to execute script from 'https://martmax.co/martmax/polyfills.a6e3c1aba633d4169f73.bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
martmax.co/:1 Refused to execute script from 'https://martmax.co/martmax/scripts.a5ebe8c46eb086e27504.bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
martmax.co/:1 Refused to execute script from 'https://martmax.co/martmax/main.dd14f2660d7784d60e49.bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
martmax.co/:1 Refused to apply style from 'https://martmax.co/martmax/styles.90e231a43b112dde0a8e.bundle.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Doing a hard refresh (CMD + SHIFT + R) skips the service worker cache and loads the newly deployed files without any issues. And then doing a regular refresh causes the error to come back.

My sw.js is not being cached and have nginx setup.

Deploying an update and refreshing pulls files from service worker, but they have the incorrect content-

My initial guess is that it's an issue with index.html , but asking if you guys have any other guesses.

@comewalk @jesperronn @mprobst @filipesilva
@Brocco @texel

[anupamarachuri]

Same issue. Any luck?

[s73obrien]

So, I don't know if this is the same issue that you guys are having, but I am working with an ejected project and, in my efforts, I noticed that, in the webpack.config.development.js file, the BaseHrefWebpackPlugin was being called with an empty parameters object:

    new BaseHrefWebpackPlugin({}),

So I changed it to:

    new BaseHrefWebpackPlugin({baseHref: baseHref}),

And set the constant declared at the beginning of the file to:

const baseHref = "/";

And it started working flawlessly. Again, no idea if that is what is going on for you, as I see you are working on an un-ejected project, but hopefully it helps somehow!

[TimMeissner]

I have the same issue with loading a js file in a script tag from the assets folder.

[ergwun]

@TimMeissner I had the same issue (js file in script tag from assets folder) where the script tag was being dynamically generated, and was using 'text/javascript' as the type. Changing it to 'application/javascript' fixed it.

[blacksonic]

Same here, blocks us from upgrading to Angular 6.
Changing the script type didnt solve the issue for me.

[VahidN]

If you are a .NET Core developer, you should set the content-types manually, because their default value is null or empty:

var provider = new FileExtensionContentTypeProvider();
app.UseStaticFiles(new StaticFileOptions
{
    ContentTypeProvider = provider // this is not set by default
});

For other web servers you should do the same by setting the correct content-types.

[blacksonic]

@VahidN I dont understand, where should I put this code? Angular CLI serves the files in my case.

[VahidN]

Angular CLI uses webpack-dev-server. I think they should make it configurable to set mimeTypes

mime: {
      'application/javascript': ['js'],
      'text/css': ['css'],
   }

[blacksonic]

It worked with previous versions and if I use plain WebpackDevServer it serves files without issues.

[filipesilva]

This seems like a bug but we'll need to look at a reproduction to find and fix the problem. Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

[blacksonic]

While trying to reproduce the issue, it is caused by breaking changes in the names of the bundled files.

The files lost their bundle suffix and inline became runtime. The bad part is that I haven't found any mentions about these changes.

The generated files are now:

• inline.bundle.js => runtime.js
• polyfills.bundle.js => polyfills.js
• vendor.bundle.js => vendor.js
• main.bundle.js => main.js

Non existing files return status code 404 in text response and this is why Chrome throws these errors mentioned in the ticket title.

[filipesilva]

@blacksonic we have changed the bundle names, yes. But also changed our build pipeline to use the updated names.

Do you have a custom index file from which you load the bundles manually?

[blacksonic]

Yes, we have a different service that uses these files.

[veluria]

In my case I just forgot that I had a base href in my index.html. Just posting in case anyone is as forgetful as I, because that is what brought me here.

[attilacsanyi]

What do you mean by base href @veluria ? Do we need to remove <base href="/"> from index.html? It was there almost from the beginning. Thx.

[veluria]

@attilacsanyi I had a different one (<base href="/app">) and that was what caused this error for me when using ng serve! :)

[dgsqrs]

I try using this option --output-hashing none and it seems to do the work (for now..). You can add it to your ng build --prod command

[Shamshiel]

I have the exact same problem like the author of this issue. I have an Angular application that runs on several nodes and on some of them I get this error in the developer console: Refused to execute script from 'https://www.my-domain.com/virtualdirectory/main.cbffc8c33220549d9ac8.bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

I haven't found a fix for it...

[b-johnse]

Similar to a few of the above, disabling cache in the network tab of chrome dev tools allowed me to load the page, but it is not a fair expectation for users. This behavior came after upgrading to 6, and my project is not ejected and is not using service workers. With any new version deployed it happens, so my suspect is the output hashing because it will render index.html but it seems to not know how to use any formerly named .bundle the browser cached.

[b-johnse]

So as I look more at it, the index.html seems cached and is asking for the old hashes, which the server returns a 404 because they no longer exist, and it tries to apply the error response which gives the above error in console (my console errors are identical, not quite all the same bundles though).

[pklejnowski]

Regarding what @blacksonic said. I have the same problem - I mean application looking for files *.bundle.js although those files are generated without suffix bundle. If I will add manually that suffix to each file then everything works fine. Is there anyway to fix it?

[pklejnowski]

@filipesilva is there any reason why you have removed bundle suffix? Those files ain't "bundled" anymore?

[pkdsite]

Same problem here, MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
I am working on a Node Project.

[manojdcoder]

I had same issue with Angular 6, I updated my base tag in _index.html_ as follows and issue was resolved.

<head>
    <meta charset="utf-8">
    <base href="/">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

[Dharmendert20]

Yeah i had the same issue. I have applied type='text/html' in link tag and issue was resolved.

[janhurst]

I am seeing this issue in a project where my angular-cli generated app is in a subdir of my "main" project dir, and I try to use ng serve --serve-path <subdir>.

I reproduced this by generating a new project and running ng serve --serve-path . from the freshly generated project.

The output of my ng --version is:

Angular CLI: 6.0.8
Node: 10.6.0
OS: win32 x64
Angular: 6.0.7
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.6.8
@angular-devkit/build-angular 0.6.8
@angular-devkit/build-optimizer 0.6.8
@angular-devkit/core 0.6.8
@angular-devkit/schematics 0.6.8
@angular/cli 6.0.8
@ngtools/webpack 6.0.8
@schematics/angular 0.6.8
@schematics/update 0.6.8
rxjs 6.2.1
typescript 2.7.2
webpack 4.8.3

I may very well be misunderstanding the usage and intent of the --serve-path flag in this use case, so my apologies in advance.

[knrt10]

Same error Refused to apply style from 'http://localhost:3000/styles.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. I even tried <base href="/"> but it didn't worked. Does someone have any idea how to make it work?

[Dharmendert20]

Use "text/html" in link tag

It will work.

On Wed, Aug 22, 2018, 4:42 PM Kautilya Tripathi [e-mail]
wrote:

Same error Refused to apply style from 'http://localhost:3000/styles.css'
because its MIME type ('text/html') is not a supported stylesheet MIME
type, and strict MIME checking is enabled. I even tried
but it didn't worked. Does someone have any idea how to make it work?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/angular/angular-cli/issues/10325#issuecomment-414997167,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AdiZVNUW82UqIJFaJu_bXEuhhhoJsnEpks5uTTy3gaJpZM4TTvYC
.

[vtransy]

n my case, my dev site set mode is production and I used command: bin/magento setup:static-content:deploy it just deploy static content for en_US and not deploy for en_AU so all static of AU site is missed. I have to deploy using command: bin/magento s:s:d en_AU then all works as normal

When you switch from developer mode to production mode it will deploy static content for all languages. but when you use command bin/magento setup:static-content:deploy it just deploy static for en_US

I wrote post describe more detail here:
https://mrvts.wordpress.com/2018/08/29/magento-2-break-layout-with-message-refused-to-apply-style-because-its-mime-type-text-html-is-not-a-supported-stylesheet-mime-type/

[shauryac]

I'm running into same issue. Any help , plz-
https://stackoverflow.com/questions/52323908/refused-to-execute-script-runtime-js-because-mime-type-is-not-executable

[Dharmendert20]

Hi there,

Please add text/html in link tag

Regards
Dharmender

On Fri, Sep 14, 2018, 9:24 AM shauryac [e-mail] wrote:

I'm running into same issue. Any help , plz-

https://stackoverflow.com/questions/52323908/refused-to-execute-script-runtime-js-because-mime-type-is-not-executable

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/angular/angular-cli/issues/10325#issuecomment-421223191,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AdiZVHmB353uMT8RHRpl0yzNiK5poMYjks5uayhagaJpZM4TTvYC
.