🔥 NG generate web worker breaks unit tests in Angular 12

[rustygreen]

🐞 Bug Report

Affected Package

The issue involves the generator for service workers when using Angular 12.

Is this a regression?

The issue was not present in previous versions of Angular. It only started happening for Angular 12.

Description

When adding a web worker in Angular12 (now required to use the import.meta.url due to webpack 5 - as the Angular docs describe), unit tests will not run:

Minimal Reproduction

1. Create a new Angular 12 application using the CLI
   npx -p @angular/cli ng new worker-test --style=scss --routing
cd new worker-test
2. Generate a web worker using the CLI
   npm run ng -- generate web-worker my-test-worker
3. Add web worker usage in app.component.ts

  ngOnInit():void{
    // NOTE: using new URL('', import.meta.url) breaks unit test compilation in v12.
    const worker = new Worker(new URL('./my-test-worker.worker', import.meta.url));
    worker.onmessage = ({ data }) => {
      console.log(`page got message: ${data}`);
    };

    worker.postMessage('hello');
  }

4. Run npm run test

Exception or Error

Your Environment

Angular Version:

Angular CLI: 12.0.3
Node: 14.17.0
Package Manager: npm 6.14.13
OS: win32 x64

Angular: 12.0.4
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.3
@angular-devkit/build-angular   12.0.3
@angular-devkit/core            12.0.3
@angular-devkit/schematics      12.0.3
@angular/cli                    12.0.3
@schematics/angular             12.0.3
rxjs                            6.6.7
typescript                      4.2.4

[alan-agius4]

For new projects this is fixed via #21057.

For existing projects, in angular.json you need to specify the web-worker tsconfig path in using the webWorkerTsConfigoption under the test builder.

[rustygreen]

That did it. Thanks, @alan-agius4!

[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.}