Vite HMR websocket connection fails

[xCyberxx]

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

Angular 19 with webpack

Description

We are busy updating our Angular 19 projects to Angular 20. Here we chose to start using Vite as well. However, we have been running into some issues regarding the HMR websocket connection that is being setup by Vite to notify about changes and such. We are using a custom name portal.domain.dev for local development. Running Angular 20 in a docker container (like we have done for years) with the following docker command:

node /opt/project/node_modules/@angular/cli/bin/ng serve --port 4201 --host 0.0.0.0 --allowed-hosts=all --ssl --ssl-cert /etc/ssl/certs/domain.dev_public_chain.pem --ssl-key=/etc/ssl/certs/domain.dev.key

We have configured this portal.domain.dev in our hosts file on our machines. We then open the page using https://portal.domain.dev:4201/ and see the following in the browser console:

Angular is running in development mode.
client:745 WebSocket connection to 'wss://portal.domain.dev:4201/?token=sfUythYHSwtQ' failed: 
createConnection @ client:745
connect @ client:411
connect @ client:751
connect @ client:289
connect @ client:373
(anonymous) @ client:823Understand this error
client:755 WebSocket connection to 'wss://localhost:4201/?token=sfUythYHSwtQ' failed: 
createConnection @ client:755
connect @ client:411
connect @ client:759Understand this error
client:765 [vite] failed to connect to websocket.
your current setup:
  (browser) portal.domain.dev:4201/ <--[HTTP]--> localhost:4201/ (server)
  (browser) portal.domain.dev:4201/ <--[WebSocket (failing)]--> localhost:4201/ (server)
Check out your Vite / network configuration and https://vite.dev/config/server-options.html#server-hmr .

We also noticed that when we go to https://localhost:4201/ and accept the certificate issue there, going back to https://portal.domain.dev:4201/ would allow the websocket connection using its fallback attempted connection on localhost. See the following from the browser console:

client:745 WebSocket connection to 'wss://portal.domain.dev:4201/?token=sfUythYHSwtQ' failed: 
createConnection @ client:745
connect @ client:411
connect @ client:751
connect @ client:289
connect @ client:373
(anonymous) @ client:823Understand this error
debug_node.mjs:18311 Angular is running in development mode.
client:760 [vite] Direct websocket connection fallback. Check out https://vite.dev/config/server-options.html#server-hmr to remove the previous connection error.

We also have one other project we are updating to Angular 20 where we use localhost instead of portal.domain.dev. This issue is not present there.

We have spent quite a bit of time to try and fix this. But we traced this back to the HMR host configuration, which to our knowledge is not configurable through the CLI and is fully encapsulated, preventing us from exerting influence on this part of Vite. To bypass this we have developed a patch which fixed this issue and allows us to configure server.hmr.host. We are considering using this patch because this does fix our issue when we configure it to be portal.domain.dev. You will find the patch below:

diff --git a/node_modules/@angular/build/src/builders/dev-server/vite-server.js b/node_modules/@angular/build/src/builders/dev-server/vite-server.js
index 271dc0c..fd35e0f 100755
--- a/node_modules/@angular/build/src/builders/dev-server/vite-server.js
+++ b/node_modules/@angular/build/src/builders/dev-server/vite-server.js
@@ -714,6 +714,10 @@ async function setupServer(serverOptions, outputFiles, assets, preserveSymlinks,
                 cert: await (0, promises_1.readFile)(serverOptions.sslCert),
                 key: await (0, promises_1.readFile)(serverOptions.sslKey),
             };
+
+            configuration.server.hmr = {
+                host: process.env.VITE_HMR_HOST || 'portal.domain.dev',
+            };
         }
         else {
             const { default: basicSslPlugin } = await Promise.resolve().then(() => __importStar(require('@vitejs/plugin-basic-ssl')));

We would like Angular to expose some way to configure the server.hmr.host, either via a CLI flag or through the angular.json.

Minimal Reproduction

Please see the description.

Exception or Error

Your Environment

Angular CLI: 20.3.13
Node: 22.21.1
Package Manager: npm 10.9.4
OS: linux arm64
    

Angular: 20.3.15
... animations, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router

Package                      Version
------------------------------------
@angular-devkit/architect    0.2003.13
@angular-devkit/core         20.3.13
@angular-devkit/schematics   20.3.13
@angular/build               20.3.13
@angular/cli                 20.3.13
@angular/google-maps         20.2.14
@schematics/angular          20.3.13
rxjs                         7.8.2
typescript                   5.8.3
zone.js                      0.15.1

Anything else relevant?

No response