时间戳

首页 > 解决方案 > 如何在 Angular 中使用 SharedWorker？

angular - 如何在 Angular 中使用 SharedWorker？

问题描述

我的 Angular 应用程序中已经有了 Workers。但我正在尝试创建一个共享工作者，但它失败了，说“无法获取工作者脚本”。在控制台中。

const worker = new SharedWorker('../../../workers/my.shared.worker', { name: 'mySharedWorker', type: 'module' });

如果我用 Worker 替换 SharedWorker - 它可以完美运行。

当然，我根据需要制作了一切。创建了一个附加.tsconfig文件：

/// tsconfig.worker.json
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/worker",
    "lib": [
      "es2018",
      "webworker"
    ]
  },
  "include": [
    "src/workers/*.worker.ts"
  ]
}

并添加webWorkerTsConfig到angular.json配置中：

projects.myProject.architect.build.options.webWorkerTsConfig: "tsconfig.worker.json"

我发现了 Nikita Barsukov 的这篇文章，但它仅在您的 Worker 以单个文件存储在assets文件夹中时才有效。但是我的 SharedWorker 包含十几个 .ts 文件，应该像普通 Worker 一样打包。

标签： angularwebpackangular-clishared-worker

解决方案

似乎 Angular-CLI 现在（对于 v10.0.7）仅支持工人。但不是 SharedWorkers。

Angular-CLI 在后台使用worker-plugin。实际上，它可以加载 SharedWorkers，但它应该在 WebpackConfig 中启用。

所以有两种选择。

  1. 在自定义 webpack 配置中使用@angular-builders/custom-webpack和添加sharedWorker参数。WorkerPlugin但我无法让它工作。

  2. 使用custom-webpack 加载器（这个选项对我有用）：

import workerUrl from 'worker-plugin/loader?name=mySharedWorker!../../../workers/my.shared.worker.ts';
// ....
const worker = new SharedWorker(workerUrl, { name: 'mySharedWorker', type: 'module' });

name=mySharedWorker未来捆绑文件的名称在哪里。如果你省略它，它将使用类似的东西0.worker.js，但它可能会与普通的 Worker 捆绑发生冲突，因为它会使用相同的名称。所以总是在加载器参数中指定你的包的名称。

推荐阅读