How do I resolve resource was blocked, MIME type mismatch in Angular?

Question

I am following Angular documentation attempting to try out a basic Web Worker sample.

I built a basic Angular template app and it runs fine.

I added a very basic component named RunnerComponent and then ran the command (as directed by docs):

ng generate web-worker runner

That successfully adds the dependencies and adds the new TypeScript file and adds the test code to my RunnerComponent. Here's the simple code it includes in the newly added runner.worker.ts:

/// <reference lib="webworker" />

addEventListener('message', ({ data }) => {
  const response = `worker response to ${data}`;
  postMessage(response);
});

Here's the code it adds to my RunnerComponent in runner.component.ts:

if (typeof Worker !== 'undefined') {
  // Create a new
  const worker = new Worker('./runner.worker', { type: 'module' });
  worker.onmessage = ({ data }) => {
    console.log(`page got message: ${data}`);
  };
  worker.postMessage('hello');
} else {
  // Web Workers are not supported in this environment.
  // You should add a fallback so that your program still executes correctly.
}

The app continues to run just fine, but when the following line runs, I get the error:

const worker = new Worker('./runner.worker', { type: 'module' });

The Main Error (via FireFox)

The resource from “http://localhost:4200/runner.worker” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff)

I'm using the basic Angular development web server (starting it up with the command ng serve) and I'm assuming that is the Node.js http-server but not entirely sure.

Do you know why I'm getting this error?

Is it trying to serve the actual runner.worker.ts and not the generated content or something?

Is there a way I can add the nosniff header to the http-server so the error will be ignored (X-Content-Type-Options: nosniff)? Where would I add that?

How can I resolve this?

Update: What I've Tried

I have created a public GitHub repo which contains the Angular CLI project that will showcase this issue. Get it at: https://github.com/raddevus/AngularWebWorker You can clone the repo down and try it and see the error for yourself.

Added Route

I thought maybe this issue was related to needing a route related to my Runner.Component (the URL requested by the WebWorker is http://localhost:4200/runner.worker) so I added a route to see if that would help.

const routes: Routes = [{ path:  'runner.worker', 
component:  RunnerComponent}
];

Unfortunately, this did not solve the problem.

Tried Edge Browser

I normally use FireFox and that is what I documented the error above from. So I also tried MS Edge and I do get a similar error:

SEC7112: Script from http://localhost:4200/runner.worker was blocked due to mime type mismatch

Tried Chrome Browser : Version 75.0.3770.100 (Official Build) (64-bit)

I see the following:

runner.component.ts:13 Uncaught TypeError: Failed to construct 'Worker': Module scripts are not supported on DedicatedWorker yet. You can try the feature with '--enable-experimental-web-platform-features' flag (see https://crbug.com/680046)

at Module../src/app/runner.component.ts (runner.component.ts:13)

That line of code (runner.component.ts:13) is:

const worker = new Worker('./runner.worker', { type: 'module' });

The associated link is long and I'll have to read through that to see if it has something meaningful.

Answer 1

I pulled my code from the GitHub site (to test it locally), compiled the code and now the solution works (error does not occur).

You can see the code is now running in the following image, because the expected output is written to the console.log and shows that line runner.component.ts:15 is executed.

I believe this now works because I added the Angular Route. However, yesterday and last night when I added that route I still didn't see it working. I'm not sure if this is a problem with the http-server or a caching problem or whatever. I will have to investigate to determine the root cause.

Removed Route, Still Works

I removed the route, stopped the http-server and ran it again and the code still works. Now I can't seem recreate the problem. However, as you can see the issue is resolved and I've tested it in both Chrome and FireFox.

Update: Error Occurs For Other Reasons

I started completely over in an attempt to recreate the problem that seemed to have disappeared.

I created a new Angular project via CLI:

ng new ThirdOne 

I built it and ran it. Then I added the web worker again via the original docs

ng generate web-worker runner

Then I saw the similar error again which points to that specific web worker line but is a false error.

You can see the error in FireFox:

But, it is now a bit different in and older version of Chrome (Version 56.0.2924.87):

But, compare that to the error I get in the current version of Chrome (Version 75.0.3770.100 (Official Build) (64-bit)):

This Is The Red Herring

Notice, that it again points to that same line in the code which is the instantiation of the Web Worker (runner.component.ts:13). Note: It doesn't render as much of the page either.

const worker = new Worker('./runner.worker', { type: 'module' });

But, that isn't really the root issue. This is all quite terrible.

Final Update: Visual Studio Code: The Culprit?

I'm using Visual Studio Code as my editor.

Version: 1.35.1 (user setup)
Commit: c7d83e57cd18f18026a8162d042843bda1bcf21f
Date: 2019-06-12T14:30:02.622Z
Electron: 3.1.8
Chrome: 66.0.3359.181 Node.js: 10.2.0 V8: 6.6.346.32

OS: Windows_NT x64 10.0.14393

Possible Strange Solution

After posting that last update, I decided to close the project in Visual Studio Code and restart the http-server (node http server). I did so and the problem went away.

And, maybe that is related to the fact that Visual Studio Code implements Chrome code??

Yesterday I restarted the http-server numerous times and continued to see the problem. However, I did keep the project open in Visual Studio Code. This may be the answer and it is terrible.

Final Answer

Today (almost 2 weeks later), I was once again working on a new Angular project and adding a new Angular Web Worker. I experienced the problem again. This time I have verified that you have to :

1. Close the project in Visual Studio Code
2. Stop the http server
3. run ng build (rebuild your Angular app)
4. Start http server again ng serve

The problem will be gone and you can edit the project with Visual Studio Code again.