Hacktoberfest 2026:维护者为十月标记出来的 issue,仍然开放、适合新手。 浏览 Hacktoberfest issue

Running multiple applications which proxy to each other breaks HMR

未关闭
#30,321 0 条评论 1 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

评估

难度
4/5
预计耗时
3-5 天
新手友好度
35/100
Issue 类型
缺陷
描述清晰度
基本清楚
活跃度
停滞
技术栈
angular, typescript, vite

调研方向

从链接的复现仓库及其 README 开始,通过已配置的代理复现跨应用 HMR。然后跟踪 Angular application builder 的 Vite 开发服务器 HMR 请求,重点关注为什么通过另一个应用的端口获取时,更新后的 JavaScript 响应为空。当热更新能够在经过代理的应用之间正确加载,同时完整重新加载的行为保持不变时,即视为完成。

由索引模型根据 Issue 内容生成。

描述

area: @angular/build devkit/build-angular:dev-server freq1: low severity3: broken
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:

WebSocket connects WebSocket receives update event JavaScript response is empty

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
平均合并
16 小时 35 分钟
30 天内合并 PR
176

贡献指南

打开贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

angular/angular-cli 的其他 Issue

查看 angular/angular-cli 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。