【发布时间】：2019-11-08 14:44:27
【问题描述】：
我正在关注 Angular documentation 尝试尝试基本的 Web Worker 示例。
我构建了一个基本的 Angular 模板应用程序，它运行良好。
我添加了一个名为 RunnerComponent 的非常基本的组件，然后运行命令（按照文档的指示）：
ng generate web-worker runner
这成功添加了依赖项并添加了新的 TypeScript 文件并将测试代码添加到我的 RunnerComponent。 这是它包含在新添加的 runner.worker.ts 中的简单代码：
/// <reference lib="webworker" />
addEventListener('message', ({ data }) => {
const response = `worker response to ${data}`;
postMessage(response);
});
这是它在 runner.component.ts 中添加到我的 RunnerComponent 的代码：
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.
}
应用程序继续正常运行，但是当以下行运行时，我收到错误：
const worker = new Worker('./runner.worker', { type: 'module' });
主要错误（通过 FireFox）
来自“http://localhost:4200/runner.worker”的资源被阻止 由于 MIME 类型（“text/html”）不匹配（X-Content-Type-Options： 不闻）
我正在使用基本的 Angular 开发 Web 服务器（使用命令 ng serve 启动它），我假设它是 Node.js http-server，但不完全确定。
你知道我为什么会收到这个错误吗？
它是否试图为实际的 runner.worker.ts 而不是生成的内容提供服务？
有没有办法可以将 nosniff 标头添加到 http-server 以便忽略错误 (X-Content-Type-Options: nosniff)？我会在哪里添加？
我该如何解决这个问题？
更新：我的尝试
我创建了一个公共 GitHub 存储库，其中包含将展示此问题的 Angular CLI 项目。获取地址：https://github.com/raddevus/AngularWebWorker 您可以将 repo 克隆下来并尝试自己查看错误。
添加路线
我认为这个问题可能与需要与我的 Runner.Component 相关的路由（WebWorker 请求的 URL 是 http://localhost:4200/runner.worker）有关，所以我添加了一个路由以查看是否有帮助。
const routes: Routes = [{ path: 'runner.worker',
component: RunnerComponent}
];
很遗憾，这并没有解决问题。
试用 Edge 浏览器
我通常使用 FireFox，这就是我记录上述错误的原因。 所以我也尝试了 MS Edge，但确实遇到了类似的错误：
SEC7112：来自http://localhost:4200/runner.worker 的脚本被阻止 由于 mime 类型不匹配
试用过的 Chrome 浏览器：版本 75.0.3770.100（官方构建）（64 位）
我看到以下内容：
runner.component.ts:13 Uncaught TypeError: 构造失败 'Worker'：DedicatedWorker 尚不支持模块脚本。你 可以使用“--enable-experimental-web-platform-features”尝试该功能 标志（见https://crbug.com/680046）
at Module../src/app/runner.component.ts (runner.component.ts:13)
那行代码（runner.component.ts:13）是：
const worker = new Worker('./runner.worker', { type: 'module' });
相关链接很长，我必须通读它以查看它是否有意义。
【问题讨论】：
-
永远不要使用 Edge 的结果作为任何东西的参考。使用 Firefox 和 Chrome 作为您的参考浏览器。
-
@Rob 好点，现在在 Chrome 上测试。将发布结果。
标签： angular visual-studio-code http-headers web-worker