Hacktoberfest 2026:メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Running multiple applications which proxy to each other breaks HMR

オープン
#30,321 コメント 0 件 リアクション 1 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
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
平均マージ
17時間 25分
マージ済み PR(30日)
183

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

angular/angular-cli のほかの issue

angular/angular-cli の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。