Warning: Conflict: Multiple assets emit different content to the same filename 0.worker.js

[muuvmuuv]

🐞 Bug report

Command (mark with an x)

• serve

Is this a regression?

No

Description

I have two independent modules which have both their own workers. Now when I serve my app and edit any file inside one module tree it prints Multiple assets emit different content to the same filename 0.worker.js.

🔬 Minimal Reproduction

https://github.com/muuvmuuv/angular-worker-issue

1. server the app
2. go into src/app/two/two.page.ts:14
3. edit the file and save it

🔥 Exception or Error

Warning: Conflict: Multiple assets emit different content to the same filename 0.worker.js
Warning: Conflict: Multiple assets emit different content to the same filename 0.worker.js.map

🌍 Your Environment

Angular CLI: 11.0.3
Node: 14.15.1
OS: darwin x64

Angular: 11.0.3
... cli, common, compiler, compiler-cli, core, platform-browser
... platform-browser-dynamic, router, service-worker
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1100.3
@angular-devkit/build-angular   0.1100.3
@angular-devkit/core            11.0.3
@angular-devkit/schematics      11.0.3
@schematics/angular             11.0.3
@schematics/update              0.1100.3
rxjs                            6.6.3
typescript                      4.0.5

Anything else relevant?

I am using observable-webworker lib to be able to use Observables with workers but also tested without the lib and the error still persist.

[alan-agius4]

This is probably due to Webpack 5 usage, which now includes worker bundling and it also requires a different syntax.

[muuvmuuv]

I am not using webpack 5. It's just in the repo to test against it. That is why npm is used here in conjunction with npm-force-resolution.

[tedaky]

I was able to solve this issue by adding a name to WorkerOptions.
For example in your minimal repo update one.page.ts new Worker('./one.worker.ts', { type: 'module' }) to new Worker('./one.worker.ts', { type: 'module', name: 'worker-one' }) and in two.page.ts new Worker('./two.worker.ts', { type: 'module' }) to new Worker('./two.worker.ts', { type: 'module', name: 'worker-two' })

[muuvmuuv]

I am on holiday now but will test it in January. Thank you for the hint. Anyway I think Angular should be smart enough ^^

[destus90]

Hasn't the issue been resolved GoogleChromeLabs/worker-plugin#35 ?

[muuvmuuv]

@destus90 seems like in v3, maybe it got changed later again?

[muuvmuuv]

Using a name fixed it for me.

[angular-automatic-lock-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.}