WebWorkers problem in Angular related to Vite `optimizeDeps`
Nobody has claimed this yet.
Assessment
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Newbie friendliness
- 42/100
- Issue type
- Bug
- Clarity
- Mostly clear
- Activity status
- Quiet
- Tech stack
- typescript, vite
- Domain
- build-system, tooling
Research direction
Clone the linked cornerstonejs/angular-cornerstone3d reproduction and run npm i followed by npm run start; compare its Angular setup with the working Vite examples. Investigate Angular CLI handling of Vite optimizeDeps, caching, and module workers, then verify that the warning is resolved, the worker uses the correct path, and npm run build succeeds.
Written by the indexing model from the issue text.
Description
Command
serve
Is this a regression?
- Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was
No response
Description
We have a library that utilizes web workers. It employs the new Worker interface:
const instance = new Worker(
new URL('./decodeImageFrameWorker.js', import.meta.url),
{ type: 'module' }
);
We have successfully consumed the lib in various scenarios, whether based on Webpack or Vite. See the examples below:
- https://github.com/cornerstonejs/vite-react-cornerstone3d
- https://github.com/cornerstonejs/vue-cornerstone3d
- https://github.com/cornerstonejs/nextjs-cornerstone3d
When integrating into a Vite-based framework, a warning appears regarding one of the dependencies. This is a known issue in Vite, specifically with esbuild. To resolve this, we should add the library to optimizeDeps in the Vite config - recommended by vite maintainers, which works well.
I attempted to integrate a poc of the same library in Angular and encountered a similar warning. I tried customizing Vite but faced a limitation, as there is no way to override optimizeDeps in Angular, as noted here.
In some threads, I see that setting
"cli": {
"cache": {
"enabled": false
}
}
removes the warning above, but then the worker is requested from an incorrect path.
I also have tried the following
"development": {
"buildTarget": "angular-vite-6:build:development",
"prebundle": false
}
still no success
Minimal Reproduction
This is basically minimal repo for reproduction
commands to run
npm i
npm run start
Exception or Error
With the cache enabled, the Vite warning appears, and disabling the cache loads the worker from the wrong path.
Your Environment
Angular CLI: 19.0.2
Node: 18.19.1
Package Manager: npm 10.2.4
OS: darwin arm64
Angular: 19.0.1
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1900.2
@angular-devkit/build-angular 19.0.2
@angular-devkit/core 19.0.2
@angular-devkit/schematics 19.0.2
@angular/cli 19.0.2
@schematics/angular 19.0.2
rxjs 7.8.1
typescript 5.6.3
zone.js 0.15.0
Anything else relevant?
I want to emphasize that other Vite-based implementations for Vue, React, and Quasar work, so it's only Angular that's not working.
In addition, the npm run build also does not work and tries to load the worker from a wrong path (Again the build with vite, and webpack works)
- Dominant language
- TypeScript
- Stars
- 27k
- Forks
- 11.8k
- Avg merge
- 16h 35m
- Merged PRs (30d)
- 176
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from angular/angular-cli
-
area: @angular/build gemini-triaged
Difficulty 2/5 1-3 hours Newbie friendliness 74/100
angular/angular-cli#33955 ·
-
area: @angular/cli gemini-triaged
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
angular/angular-cli#33055 · 1 comment · 3 reactions ·
-
area: @angular/build gemini-triaged
Difficulty 4/5 3-5 days Newbie friendliness 72/100
angular/angular-cli#34137 ·
-
angular/build:library area: @angular/build gemini-triaged
angular/angular-cli#34131 · 1 assignee ·
-
angular/build:library area: @angular/build gemini-triaged
angular/angular-cli#34130 · 1 assignee ·
All issues in angular/angular-cli
Similar issues
-
Difficulty 2/5 1-3 hours Newbie friendliness 74/100
ontola/atomic-server#1625 ·
-
bug
Difficulty 2/5 1-3 hours Newbie friendliness 70/100
melgarafael/DeskcommCRM#1451 ·
-
Difficulty 1/5 Under an hour Newbie friendliness 82/100
-
bug via-triage
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
-
bot:ai-assisted component:compact-js status:untriaged
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
midnightntwrk/midnight-sdk#403 ·