如何在 Angular 中使用 SharedWorker？

Question

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

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"

我找到了this article by Nikita Barsukov，但它只有在您的 Worker 作为单个文件存储在 assets 文件夹中时才有效。但是我的 SharedWorker 包含十几个 .ts 文件，应该像普通 Worker 一样打包。

Answer 1

现在看来 Angular-CLI（对于 v10.0.7）只支持工人。但不是 SharedWorkers。

Angular-CLI 在后台使用worker-plugin。而且实际上可以加载SharedWorkers，但应该是enabled in WebpackConfig。

所以有两种选择。

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

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

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 捆绑发生冲突，因为它会使用相同的名称。所以总是在加载器参数中指定你的包的名称。