Angular 库中的 Web Worker

Question

我正在开发一个执行强大计算操作的角度库。因此我对实现 Web Worker 感兴趣，以便获得更好的用户体验并让复杂的操作在后台运行。

我的问题是，当我使用 Angular CLI 8 运行命令

ng g web-worker

时，输出为

Web Worker requires a project type of "application".

有人对如何在我的图书馆中继续实施 Web Worker 有建议吗？

Answer 1

图书馆本身应该只为用户提供功能。由开发人员决定如何使用它们：在网页主上下文中、在 Web Worker 中或在服务器端渲染管道中。所以没有直接简单的方法来完成你所要求的事情。正确的方法是创建您的库，然后创建一个单独的项目，例如

ng new --create-application false workername

然后直接配置 webpack 以获得使用您的库的缩小包。如果您确实想将 webworker 捆绑到您的库中，您可以尝试内联它（参见）。它还需要您使用 webpack 来创建缩小的结果并将其作为 Blob 嵌入到您的包中。

查看以下链接，在这两种情况下都很有用：

Answer 2

我的团队也面临着同样的挑战（这让我看到了这篇文章），我们找到了一个相当优雅的解决方案。

有几个方面在起作用：

WebWorker 代码必须与onlyWebWorker 代码隔离在单个文件中。我们将 WebWorker Typescript 代码隔离在谨慎的单独文件中，每个 Worker 一个文件。这里没问题。
在library构建时，需要编译worker Typescript代码。在
```
ng-build
```
期间，Typescript 编译器确实找到了 webworker typescript 文件并编译它们。像下面这样的代码有效，并导致
```
custom.worker.ts
```
被转换为
```
custom.worker.mjs
```
。
```
 const worker = new Worker(new URL('./custom.worker', import.meta.url), { name: 'CustomWorker', type: 'module' });
```
筛选您构建的库的
```
dist
```
文件夹，您就会找到它。它看起来像
```
dist/shared-library-code/esm2020/lib/workers/custom.worker.mjs
```
。编译后的库 Javascript 代码中仍然有一个
```
new Worker()
```
表达式指向
```
./custom.worker
```
。
在 app 构建时和运行时，实例化 Web Worker 的代码需要 WebWorker 文件的精确路径。但 Webpack 进程完全重新排列文件，将一些文件捆绑在一起并更改路径。这是棘手的部分。

因此，我们需要一些魔法来从

new Worker()

代码期望webworker文件所在的位置映射到worker代码存在的实际位置。我们可以在 2 组内完成此操作。

首先，在您的库中创建一个映射文件。我将它们保存在

worker-declarations

文件夹中。这些文件必须与打字稿工作文件命名相同，但带有 .js 后缀。

    // File: .../shared-library-code/worker-declarations/special.worker.js
    export * from "../esm2020/lib/workers/special.worker.mjs";

export

路径是工作文件所在的路径，相对于应用程序的

dist

文件夹中捆绑的库文件。如果您在

dist

中寻找它，您就会找到它。

其次，更新您的库的

ng-package.json

以将您的 js 映射文件声明为资产以与库捆绑在一起。它看起来像这样：（在我的例子中，我只复制到

dist/fesm2020

文件夹，因为这就是我所需要的。您可以为

fest2015

添加更多行，或任何其他您需要的内容。）

   // File: ng-package.json
   "assets": [
       { "input": "./worker-declarations", "glob": "*.worker.js", "output": "fesm2020" }
   ]

希望这足以让您到达终点线。享受吧！

Answer 3

我认为你必须在

ng generate web-worker

---->

ng generate web-worker app

之后添加应用程序！