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

compiler

Is this a regression?

No

Description

Hi, I don't know if this is an issue or it should be a feature request. The thing is I'm using web workers in my Angular app, and I have found some issues while deploying it.

In my service, I'm importing the web worker as the Angular doc says.

this.worker = new Worker(new URL('../utils/workers/myworker.worker', import.meta.url), 
   {name: 'worker', type: 'module'}
)

during development (ng serve) it works as expected.

But when I build, I see in my dist folder a new file called worker-<HASH>
I'm building with @angular-devkit/build-angular:browser-esbuild using this command:

• ng build --configuration=production --deploy-url "https://${CLOUDFRONT_URL}/${VERSION}"

CLOUDFRONT_URL is the URL of my AWS CDN.

The main issue is, that I'm not able to locate the file. Because "import.meta.url" is not the current URL I'm using for the web page.

Example:

• Lets say that my page is hosted at www.mypage.com
• My files are hosted on a cloudfront cdn, thus, files lives on s3, and I'm able to download it using the CLOUDFRONT_URL mentioned above. (that's why I'm using the --deploy-url param)

Another thing that I noted is that, when I do something like this:

// my typescript code

if(environment.name === 'development'){
    this.worker = new Worker(new URL('../utils/workers/myworker.worker', import.meta.url),
        {name: 'worker', type: 'module'}
     )
} else {
    this.worker = new Worker(new URL('../utils/workers/myworker.worker', 'https://mypage.com')
        {name: 'worker', type: 'module'}
    )
}

its gets transpiled to something like this:

if(environment.name === 'development'){
    this.worker = new Worker(new URL('worker-F4AB9Z', import.meta.url),
        {name: 'worker', type: 'module'}
     )
} else {
    this.worker = new Worker(new URL('../utils/workers/myworker.worker', 'https://mypage.com')
        {name: 'worker', type: 'module'}
    )
}

Note that Esbuild replaced the ../utils/workers/myworker.worker with the compiled filename worker-F4AB9Z.
But it is not doing the same with any string other than "import.meta.url" for the URL of the new worker.

If I try to do something like

const url = new URL('../utils/workers/myworker.worker', import.meta.url)

I wont work. Esbuild will only replace the file path with the compiled filename if I put the new URL( ... ) inside the Worker constructor. Is that expected?

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in (run ng version)

_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 17.3.8
Node: 20.9.0
Package Manager: npm 10.7.0
OS: linux x64

Angular: 17.3.10
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1703.8
@angular-devkit/build-angular   17.3.8
@angular-devkit/core            17.3.8
@angular-devkit/schematics      17.3.8
@angular/cdk                    16.2.14
@angular/cli                    17.3.8
@schematics/angular             17.3.8
rxjs                            6.6.7
typescript                      5.3.3
zone.js                         0.14.6

Anything else?

Another question: Is there any way that I could have the output filename ( the worker-F4AB9Z ) in a variable?
Because currently I'm manually deploying the web worker to s3 and hardcoding the URL in the code.
But as you may know, the hash of the file changes on every deploy, or at least when the worker code changes. And its annoying.