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.
