Angular 12 breaks imports in webworkers when using deploy-url

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]

@clydin and myself have looked into this and following our investigations this is working as intended.

This is because when using importScripts the url provided is resolved relative to the base URL, A worker however, doesn’t have access to the document and hence it will be loaded relative to itself.

[alan-agius4]

Let’s leave this issue open for the time being.