Angular 12 breaks imports in webworkers when using deploy-url

[philmayfield]

Which @angular/* package(s) are the source of the bug?

compiler-cli, compiler

Is this a regression?

No

Description

Problem

After upgrading to Angular 12 we have a new form of error showing up in the application originating in webworker files. The error reads like:

Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://0.0.0.0:8000/worker-demo/en-US/worker-demo/en-US/815-es2015.d4b6125197f07f82436e.js' failed to load.

Note how (in this example) the worker-demo/en-US is duplicated.

It appears that the source of the issue is from setting --deploy-url='worker-demo/en-US/' on the build command. That value is picked up in the webworker by webpack:

/******/ 	/* webpack/runtime/publicPath */
/******/ 	!function() {
/******/ 		__webpack_require__.p = "worker-demo/en-US/";
/******/ 	}();

And then passed to importScripts:

importScripts(__webpack_require__.tu(__webpack_require__.p + __webpack_require__.u(chunkId)));

Resulting in something that looks like:

Reproduction

I've provided a reproduction repo to illustrate the issue.

1. Pull down the repo and install
2. Run yarn build (add --optimization=false to be able to see unminified code)
3. Because we're using --deploy-url we need to move the index.html file up to the dist folder.
4. Run a simple web server from the dist folder python -m SimpleHTTPServer 8000
5. Visit http://0.0.0.0:8000/

The app will bootstrap fine, but when the webworker goes to import the vendor bundle its looking for another webworker-demo/en-US folder.

Please provide a link to a minimal reproduction of the bug

https://github.com/philmayfield/worker-demo

Please provide the exception or error you saw

Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://0.0.0.0:8000/worker-demo/en-US/worker-demo/en-US/815-es2015.d4b6125197f07f82436e.js' failed to load.

Please provide the environment you discovered this bug in

Angular CLI: 12.1.2
Node: 14.16.0
Package Manager: npm 6.14.11
OS: darwin x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1201.2
@angular-devkit/build-angular   12.1.2
@angular-devkit/core            12.1.2
@angular-devkit/schematics      12.1.2
@angular/localize               12.1.3
@schematics/angular             12.1.2
rxjs                            6.6.7
typescript                      4.3.5

Anything else?

Its very possible we've got a flaw in our setup, buuuut it was working in Angular 11 🤷

[alan-agius4]

What is happening here is that the shared chunks in a webworker is loaded using importScripts, this loads the files relative to the worker.

This means that when a relative deployUrl is used it will cause files not to be found because the generated webpack import will include the deployUrl.

In this case you should be able to fix this this by using an absolute value /worker-demo/en-US/.

Edit: importScripts does respect the document base url, so something else is going on.