Как использовать веб-работников (ngx-web-worker) в угловых?

Question

Я хочу использовать два больших текста, поэтому я решил использовать diffjs (https://www.npmjs.com/package/diff). К сожалению, это было слишком тяжело для процесса javascript и сделало страницу бесполезной в течение более 15 секунд.

У меня есть угловое приложение, поэтому я решил попробовать 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);
        });
  }
}

Спасибо за вашу помощь и время заранее. :)

Answer 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 из активов.

Надеюсь, это поможет другим:)