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.

[philmayfield]

Ah! Thank you for your quick reply @alan-agius4!

I see that you edited your comment but for what its worth, making the deploy url absolute in my cases did indeed resolve the issue for me, and it makes sense in hind sight. Frustrating I suppose that it'd behave differently after upgrading.

Again, thank you very much for the assist 🙇 ! Would you like me to close this issue, or do you think there is something to investigate further?

[alan-agius4]

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

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

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