Angular-cli: Importing multiple Web Workers mixes them up

[monocl-oskar]

🐞 bug report

Affected Package

Maybe the bundler.

Is this a regression?

Angular versions <7 didn't have built-in support for Web Workers.

Description

I import multiple Web Workers but when messaging one specific, the messages gets sent and received to/from the wrong Web Worker.

Simple code repro from fresh install:

// foo.worker.ts
/// <reference lib="webworker" />

addEventListener('message', () => postMessage('Hello from FooWorker'));

// bar.worker.ts
/// <reference lib="webworker" />

addEventListener('message', () => postMessage('Hello from BarWorker'));

// baz.worker.ts
/// <reference lib="webworker" />

addEventListener('message', () => postMessage('Hello from BazWorker'));

// app.component.ts (library imports omitted)
const fooWorker = new Worker('./foo.worker', { type: 'module' });
const barWorker = new Worker('./bar.worker', { type: 'module' });
const bazWorker = new Worker('./baz.worker', { type: 'module' });

@Component({
  selector: 'app-root',
  template: '<h1>foo: {{ foo }}</h1>',
})
export class AppComponent implements OnInit {
  foo: string;

  ngOnInit() {
    fooWorker.addEventListener('message', msg => {
        this.foo = msg.data;
    });
    fooWorker.postMessage('ANY INPUT VALUE');
  }
}

Expected output:

foo: Hello from FooWorker

Actual output:

foo: Hello from BazWorker

• Commenting out the line const bazWorker.... causes the output to become foo: Hello from BarWorker (still wrong)
• Commenting out both the lines const bazWorker.... and const barWorker.... yields the correct results

🔬 Minimal Reproduction

https://github.com/monocl-oskar/angular-web-worker-problem

🌍 Your Environment

Angular Version:

Angular CLI: 8.1.2
Node: 11.15.0
OS: darwin x64
Angular: 8.1.3
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.801.2
@angular-devkit/build-angular     0.801.2
@angular-devkit/build-optimizer   0.801.2
@angular-devkit/build-webpack     0.801.2
@angular-devkit/core              8.1.2
@angular-devkit/schematics        8.1.2
@angular/cli                      8.1.2
@ngtools/webpack                  8.1.2
@schematics/angular               8.1.2
@schematics/update                0.801.2
rxjs                              6.4.0
typescript                        3.4.5
webpack                           4.35.2

Anything else relevant?

• I tried putting the Web Worker imports in three dedicated services to test a theory that the bundler didn't like them all imported in the same file - Same results
• I tried moving the instantiation from the "root scope" (above the class declaration) into the constructor (using the Web Workers as private members instead) - Same results

Hoping I'm missing something obvious, thanks!

[monocl-oskar]

Found a workaround here https://github.com/angular/angular-cli/issues/14582

const fooWorker = new Worker('./foo.worker', { name: 'foo', type: 'module' });
const barWorker = new Worker('./bar.worker', { name: 'bar', type: 'module' });
const bazWorker = new Worker('./baz.worker', { name: 'baz', type: 'module' });

The unique names solve the problem.

[developit]

Worker Plugin 3.2.0 has been published and includes a fix for this.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}