angular / angular/angular-cli

Running multiple applications which proxy to each other breaks HMR

Aberta
#30,321 0 comentários 1 reação 0 responsáveis Ver no GitHub
area: @angular/build devkit/build-angular:dev-server freq1: low severity3: broken
Linguagem predominante
TypeScript
Estrelas
27k
Forks
11.8k
Merge médio
14h 23min
PRs com merge (30d)
162

Descrição

### Command

serve

### Is this a regression?

- [x] 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

```text
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
```

Guia de contribuição

Abrir o guia de contribuição

Direção de pesquisa

Comece pelo repositório de reprodução vinculado e pelo README para reproduzir o HMR entre aplicativos por meio dos proxies configurados. Em seguida, rastreie a solicitação HMR do servidor de desenvolvimento Vite do Angular application builder, concentrando-se no motivo pelo qual a resposta JavaScript atualizada fica vazia quando é buscada pela porta de outro aplicativo. O trabalho estará concluído quando as atualizações a quente forem carregadas corretamente entre os aplicativos por proxy e o comportamento de recarregamento completo permanecer intacto.

Escrita pelo modelo de indexação a partir do texto da issue.

Avaliação

Stack de tecnologia
angular, typescript, vite
Domínio
build-system, developer-experience, devtools
Tipo de issue
Bug
Dificuldade
4/5
Tempo estimado
3-5 dias
Status de atividade
Estagnada
Clareza
Razoavelmente clara
Facilidade para iniciantes
35/100

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.