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

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-
image
image

image

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

49 Answers

✔️Accepted Answer

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>

Other Answers:

@alan-agius4 Reopen! Please! Also having this issue...

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

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!

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

More Issues: