Running multiple applications which proxy to each other breaks HMR
還沒有人認領這個 Issue。
評估
- 難度
- 4/5
- 預估耗時
- 3-5 天
- 新手友好度
- 35/100
- Issue 類型
- 缺陷
- 描述清晰度
- 基本清楚
- 活躍度
- 停滯
- 技術堆疊
- angular, typescript, vite
研究方向
從連結的重現儲存庫及其 README 開始,透過已設定的 Proxy 重現跨應用程式 HMR。接著追蹤 Angular application builder 的 Vite 開發伺服器 HMR 請求,著重了解為什麼透過另一個應用程式的連接埠擷取時,更新後的 JavaScript 回應會是空的。當熱更新能夠在經過 Proxy 的應用程式之間正確載入,同時完整重新載入的行為維持不變時,即視為完成。
由索引模型根據 Issue 內容生成。
描述
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
webpack-based dev-server HMR
Description
I work on a project which involves multiple separate Angular applications. They all live together in an Nx monorepository. It is the responsibility of one of these applications to handle user login. For ease of development, we have long configured each app and their proxies to handle forwarding to every other app, so that developers can start whichever apps are relevant to the work they are doing, log in using that app on its own port, and then navigate to other apps without needing to manually type a different port.
I hope this makes sense, I can try to explain more clearly if it doesn't. The important part is that we nearly always have more than one app running, and no matter which app's dev-server port you are on, they will always be able to forward requests intended for apps other than themselves. To achieve this each app has a unique base path which the proxy configuration uses to determine where to send requests.
We recently switched from the browser builder to the new application builder, and as a consequence the dev-server now uses Vite rather than Webpack. On the whole this has all been a great, apart from one thing: hot module reloading is broken cross-app.
I've created and linked a (somewhat minimal) reproduction repository below.
While investigating this myself, I noticed that when an app tries to hot update while on the "wrong" port, the part that seems to fail is fetching the new JavaScript file. The WebSocket connects just fine, receives the angular:component-update event just fine, and makes the request for the updated file just fine. The request even succeeds, actually, but the response is empty. Some screenshots for explanation:
It's worth noting that full-reload events work just fine, which is probably expected given the nature of what's failing about the hot reload.
That's as far as I've gotten. I'm not sure if there is some proxy configuration that I could do to fix this (I've tried some basic tweaks with no luck), or if this is a bug somewhere that needs to be fixed. But in the meantime, turning HMR off "fixes" things for us, though it isn't ideal of course.
Any help is appreciated, thank you!
Minimal Reproduction
https://github.com/tmercswims/ng-vite-mono-hmr
Includes reproduction steps in README.
Your Environment
Angular CLI: 19.2.12
Node: 22.15.0
Package Manager: npm 10.9.2
OS: darwin arm64
Angular: 19.2.11
... common, core, platform-browser, router
Package Version
------------------------------------------------------
@angular-devkit/architect 0.1902.12
@angular-devkit/build-angular 19.2.12
@angular-devkit/core 19.2.12
@angular-devkit/schematics 19.2.12
@angular/cli 19.2.12
@angular/compiler 19.2.11
@angular/compiler-cli 19.2.11
@schematics/angular 19.2.12
rxjs 7.8.2
zone.js 0.15.0
- 主要語言
- TypeScript
- 星號
- 27k
- 分支
- 11.8k
- 平均合併
- 17 小時 47 分鐘
- 30 天內合併 PR
- 181
貢獻指南
從這裡開始
- 先讀完整個 Issue,再讀專案的貢獻指南。
- 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
- Fork 儲存庫,在一個分支上完成修改。
- 送出 Pull Request,並在描述裡引用這個 Issue 編號。
angular/angular-cli 的其他 Issue
-
area: @angular/build gemini-triaged
難度 2/5 1-3 小時 新手友好度 74/100
angular/angular-cli#33955 ·
-
area: @angular/cli gemini-triaged
難度 2/5 1-3 小時 新手友好度 72/100
angular/angular-cli#33055 · 1 則留言 · 3 個 reaction ·
-
area: @angular/build gemini-triaged
難度 3/5 1-2 天 新手友好度 68/100
angular/angular-cli#34166 · 1 則留言 ·
-
area: @angular/build gemini-triaged
難度 4/5 3-5 天 新手友好度 52/100
angular/angular-cli#34164 ·
-
area: @angular/build gemini-triaged severity5: regression
難度 4/5 3-5 天 新手友好度 75/100
angular/angular-cli#34163 ·
查看 angular/angular-cli 的全部 Issue
相似的 Issue
-
難度 2/5 1-3 小時 新手友好度 84/100
bcgov/bc-wallet-mobile#4761 · 1 則留言 ·
-
external-issue to-triage
難度 2/5 1-3 小時 新手友好度 88/100
-
area-deployment area-integrations triage:bot-seen
難度 2/5 半天 新手友好度 86/100
-
難度 2/5 1-3 小時 新手友好度 82/100
-
refactor
難度 2/5 1-3 小時 新手友好度 84/100