How to work with web workers (use a web worker IN cli project)

[jbgarr]

Bug Report or Feature Request (mark with an x)

- [ ] bug report -> please search issues before submitting
- [X] feature request

Versions.

@angular/cli: 1.0.0
node: 6.9.1
os: darwin x64 (macOS Sierra 10.12.3)

Is there a way to import and use a web worker in a component using angular-cli? I'm trying to incorporate a web worker that I wrote into my project, but I'm not having any luck. The web worker worked fine in my project before attempting to convert it to use the CLI (previous version was based on System.js). I'm trying to import my web worker code like this:

import * as MyWorker from 'assets/workers/dropdown.worker.js';

and then I'm trying to create my actual worker instance like this:

let blob = new Blob(['(this.onmessage=', MyWorker.toString(), ')'], { type: "text/javascript" });
let dropdownWorker = new Worker((<any>window).URL.createObjectURL(blob));

The above does not work though, and if I log MyWorker right after I try to import it I see it's just an empty object instead of a function (which is what it is in my other app). Any help on this would be much appreciated!

UPDATE

I just want to clarify what I'm trying to do: I want to use an existing web worker IN my Angular app, not run my whole app IN a web worker. I know there is separate issue already that relates to the trying to run an entire app in a web worker. These are similar, but very different issues.

[bmayen]

Check out https://stackoverflow.com/questions/43276044/angular-cli-generated-app-with-web-workers

Would be really great to get this support by default!

[jbgarr]

Thanks a lot for the reply! I had seen that answer on Stackoverflow, but unfortunately they are trying to actually run their whole Angular app IN a web worker. I am trying to use an existing web worker in my app, so it's a little different. I appreciate the help though. Hopefully someone else can chime in here.

[maxime1992]

There's an opened issue here too : #2305

[jbgarr]

@maxime1992 I appreciate your reply. That's a similar, but different issue. It's related to the Stackoverflow question that @bmayen linked to as well. Both of those deal with trying to run an entire Angular app IN a web worker, while I just want to use and run an existing web worker in my app.

[bmayen]

@jbgarr, just curious, why do you want to take this approach? The Angular team has done some amazing work supporting running the entire app in a worker. You might meet with less friction if your use case could allow for that approach instead.

[shlangus]

We were using an inline worker-loader, but now it does not work for us (see #4773). So now we are using file-loader.
It's a little uncomfortable since you have to build a worker before building an app, but it works.

[jbgarr]

@bmayen I have a section of my app that is potential performance bottleneck so I built a custom web worker to handle the heavy lifting on another thread, but I don't necessarily need/want to run my whole app in a worker. I built the original web worker for my app before converting over to the Angular CLI to build/bundle my app and I was hoping I could just use it as is without custom tailoring my build process.

@shlangus I had seen issue #4773 and was a bit disappointed. With your new approach are you having to use ng eject and build out some custom handling of your worker? If so, would you mind sharing whatever custom code you had to add in order to get it working? I was really hoping to avoid ng eject, but it may be required if I want to reuse my web worker as is. Thanks for any insight you can share!

[shlangus]

@jbgarr First of all you need to configure build process for your worker. To do that you can create a separate webpack config such as following. It uses ts-loader so you should install it too.

const config = {
  entry: './src/worker/worker.ts',
  output: {
    filename: './src/worker/index.js'
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js']
  },
  module: {
    loaders: [
      {test: /\.tsx?$/, loader: 'ts-loader'}
    ]
  }
};

module.exports = config;

Now you are able to run webpack --config path_to_worker_config. It makes sense to add this command as "prestart" script.

Once you have done it you need to get ability to include your worker into your angular app.
You should add "node" in types array in your tsconfig.app.json, then you can just require your worker:

const MyWorker = require('file-loader?name=worker.[hash:20].[ext]!../worker/index.js');
...
worker = new Worker(MyWorker);

This solution doesn't require to perform an ejecting but it also doesn't watch for changes in the worker.

[jbgarr]

@shlangus Thanks a lot for the explanation! I'll have to give that a try when I've got some time. The general idea makes sense. Thanks again, I appreciate it.

[filipesilva]

Heya, I added some information on how to currently use webworkers in #2305. I know there's been some conversation here but that's the original issue, and it's better to concentrate discussion in a single one.

[jbgarr]

@filipesilva Thanks for the info and I had seen that issue already, but I think there is a core difference between what I'm asking/trying to do VS what that issue touches on. I am trying to use an existing web worker IN my Angular app, while that issue focuses on running an entire Angular app IN a web worker. I believe these are similar, but very different issues. Can you consider reopening this?

[maxime1992]

@filipesilva in the other issue you talked about service-worker and not web-worker :

Unless it's a typo, maybe you might reopen this (+cc @jbgarr comment)

[filipesilva]

@jbgarr @maxime1992 you're absolutely right, reopening.