Howdy,
I’m currently trying to convert a project from a messy `js.Build` setup to a more streamlined js.Batch configuration. The old build uses several `js.Build’ calls to split the code into several parts and employs the `@params ` systems for communication between them. A common use case is a WebWorker that needs the script url. The fingerprinted url is passed through that way.
Unfortunately that does not seem to work with `js.Batch`. When I try to extract the url, the build breaks as many files are no longer build:
{{- with .Group "main" -}}
{{- $gr := . -}}
{{- range resources.Match "js/main.js" -}}
{{- $file := resources.FromString "js/x-main.js" .Content -}}
{{- $worker := index (index $batch.Build.Groups "search-worker") 0 -}}
{{- with $gr.Script (path.Base $file.Name) -}}
{{ .SetOptions (dict "resource" $file) }}
{{- end -}}
{{- end -}}
{{- end -}}
...
Is this something that has already come up and a common solution is established?
I’ve read that `esbuild` should be able to handle this use case by using URLs that are automatically transpiled correctly when hashing is applied, but the Hugo integration does not seem to support that. Thanks.
bep
June 16, 2026, 5:12pm
2
Where have you read that? A link would be great.
This is the issue I have read WebWorker support? · Issue #312 · evanw/esbuild · GitHub
So, currently I suspect you need to do something ala hugoTestProjectJSModImports/assets/js/main.js at 7d79d6b7234028ca508d11fcb540ff5b299ecc00 · gohugoio/hugoTestProjectJSModImports · GitHub
When thinking about this, i think we could possibly do a better job of supporting this in js.Batch, but that’s non-trivial and not on my TODO list at the moment.
opened 08:00PM - 18 Jul 24 UTC
closed 08:39AM - 26 Jul 24 UTC
needs: more info
angular/build:application
### Which @angular/* package(s) are the source of the bug?
compiler
### Is thi… s 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.
``` typescript
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:
``` typescript
// 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:
``` typescript
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
``` typescript
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`)
```true
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
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.
esbuild standalone seems to be able to perform the necessary replacements when hashing during deployment according to the OP.
EDIT: On 2nd thought, might be specific to angular though.
Understood. As always, thanks much for your support!