Web worker service for Angular 2.

npm i angular2-web-worker

export interface IWebWorkerService { run<T>(workerFunction: (any) => T, data?: any): Promise<T>; runUrl(url: string, data?: any): Promise<any>; terminate<T>(promise: Promise<T>): Promise<T>; }

• run
  • workerFunction:
    • Must be a self-contained function. Cannot reference outside variables.
    • You can import other libraries with importScripts though
    • These are okay:

    • run(input => input * input, 10); run(input => { const square = num => num * num; return square(input); }, 10); const someFunction = (input) => input * input); run(someFunction, 10); class Runner { private webWorkerService = new WebWorkerService(); constructor() { this.webWorkerService.run(this.someFunction, 10); } someFunction() { return input * input; } }

    • These will probably NOT work:

    • // this is not okay because inside the context of the web worker `this` is not the same `this` as here. run(input => this.square(input), 10); // this is not okay because `_` doesn't exist in the web worker context (assuming tht `_` is available here to begin with) run(input => { return _.uniqueId() * input; }, 10);

  • data: serializable data
• runUrl: Basically the same as
  • url: The url you would use to create a Worker instance
  • data: Same as the run method
• terminate: Calling this will terminate the web worker, if it is still running.
  • promise: The Promise instance returned by run or runUrl.

Check out angular2-web-worker-example for a sample project, or see app/app.component.ts for usage with an Angular 2 application.

export class AppComponent implements OnInit { constructor(private _webWorkerService: WebWorkerService) { } ngOnInit() { const input = 100; const promise = this._webWorkerService.run(this.someCPUHeavyFunction, input); promise.then(result => console.log(result)); } someCPUHeavyFunction (input) { return input * 10; } }