如何在Angular中使用SharedWorker

Question

我的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一样捆绑在一起。

Answer 1

Angular CLI现在(对于v10.0.7(似乎只支持Workers。但不是SharedWorkers。

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

所以有两种选择。

1. 在自定义webpack配置中使用@angular-builders/custom-webpack并将sharedWorker参数添加到WorkerPlugin。但我没能让它发挥作用。

2. 使用自定义的webpackloader(此选项适用于我(：

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绑定的冲突，因为它将使用相同的名称。因此，请始终在loader params中指定捆绑包的名称。