如何以角度使用网络工作者（ngx-web-worker）？答案

【问题标题】：How to use web workers (ngx-web-worker) in angular?如何以角度使用网络工作者（ngx-web-worker）？
【发布时间】：2021-04-30 12:32:37
【问题描述】：

我想区分两个大文本，所以我决定使用 diffjs (https://www.npmjs.com/package/diff)。不幸的是，它对于 javascript 进程来说太重了，导致页面无用超过 15 秒。

我有一个 Angular 应用程序，所以我决定尝试 ngx-web-worker (https://www.npmjs.com/package/ngx-web-worker) 可能会有所帮助。最后可能我不理解网络工作者的这种实现，因为它没有运行。 :(

小例子：

import * as diff from 'diff';
import { WebWorkerService } from 'ngx-web-worker';

@Component({...}) ... {
  constructor(
    private _webWorker: WebWorkerService
  ){}
  ...
  ngOnInit() {
        this._webWorker.run(diff.diffTrimmedLines, this.texts).then((result) => {
          let changes:number = 0;
          result.forEach((part) => {
            if(part.added || part.removed){ changes++; }
          });
          console.log(changes);
        });
  }
}

提前感谢您的帮助和时间。 :)

【问题讨论】：

是 diff.diffTrimmedLines 纯函数；没有任何依赖。您的方法中不应有任何实例或插件依赖项。 _.find() 或角度功能之类的东西
我在github.com/kpdecker/jsdiff/blob/master/src/diff/line.js 和github.com/kpdecker/jsdiff/blob/master/src/diff/base.js 找到了代码，但我看到它没有使用任何依赖项，所以它应该可以工作。
好的。似乎有什么东西，因为我收到了这个错误：“未捕获的 ReferenceError：diff__WEBPACK_IMPORTED_MODULE_16__ 未定义”
你可以使用@angular/service-worker (angular.io/guide/service-worker-intro)。

标签： angular diff web-worker

【解决方案1】：

我将此添加到 angular.json 中的资产中：

{ "glob": "diff.min.js", "input": "node_modules/diff/dist", "output": "assets/js"}

这样我将在构建后在我的资产文件夹中获取脚本。接下来我更改了我的代码：

this._webWorker.run((input:any) => { 
   importScripts(`${input.protocol}//${input.host}/path/assets/js/diff.min.js`);
   return Diff.diffTrimmedLines(input.texts[0], input.texts[1]);
 }, {
    texts: texts,
    protocol: window.location.protocol,
    host: window.location.host
 }).then(...);

所以使用 importScripts 我可以从资产中加载 js。

希望这对其他人有帮助:)

【讨论】：

【解决方案2】：

Angular official doc

要将 Web Worker 添加到现有项目，请使用 Angular CLI ng generate 命令。

ng generate web-worker <location>

该命令执行以下操作。

将您的项目配置为使用网络工作者（如果尚未使用）。
在 src/app/app.worker.ts 中添加如下脚手架代码来接收消息。

addEventListener('message', ({ data }) => { const response = "worker 对 ${data} 的响应"; postMessage（响应）； });
将以下脚手架代码添加到 src/app/app.component.ts 以使用 worker。

  if (typeof Worker !== 'undefined') {
  // Create a new
  const worker = new Worker('./app.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.
}

【讨论】：