Failed to connect to websocket. #29915

UmbrellaCrow612 · 2025-03-21T14:38:44Z

Which @angular/* package(s) are the source of the bug?

compiler-cli

Is this a regression?

Yes

Description

When running angular over HTPPS following documentation available for example in my angular.json i added these options then ran my app through ng serve

   "serve": {
          "options": {
            "ssl": true,
            "sslKey": "ssl/private.key",
            "sslCert": "ssl/certificate.crt",
            "port": 4200,
            "host": "localhost",
            "hmr": true,
            "liveReload": true
          },

It runs on https://localhost:4200/ which is what i wanted but hmr failed with error

And Hot module reload dose not work. There is a fix on Vite docs following link but there isn't a way for me to use that fix in the angular project as the Vite config is hidden from me ?

What can i do to fix this issue if i cannot change the Vite config ?

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

client:529 WebSocket connection to 'wss://localhost:4200/' failed: 
setupWebSocket @ client:529
(anonymous) @ client:524
app.config.ts:27 
            
            
           GET https://localhost:7058/users/me 400 (Bad Request)
scheduleTask @ zone.js:2183
scheduleTask @ zone.js:388
onScheduleTask @ core.mjs:6158
scheduleTask @ zone.js:382
onScheduleTask @ zone.js:271
scheduleTask @ zone.js:382
scheduleTask @ zone.js:205
scheduleMacroTask @ zone.js:228
scheduleMacroTaskWithCurrentZone @ zone.js:691
(anonymous) @ zone.js:2222
proto.<computed> @ zone.js:1003
(anonymous) @ http.mjs:2464
Observable2._trySubscribe @ Observable.js:33
(anonymous) @ Observable.js:27
errorContext @ errorContext.js:23
Observable2.subscribe @ Observable.js:23
(anonymous) @ switchMap.js:16
OperatorSubscriber2._this._next @ OperatorSubscriber.js:14
Subscriber2.next @ Subscriber.js:32
(anonymous) @ innerFrom.js:51
Observable2._trySubscribe @ Observable.js:33
(anonymous) @ Observable.js:27
errorContext @ errorContext.js:23
Observable2.subscribe @ Observable.js:23
(anonymous) @ switchMap.js:12
(anonymous) @ lift.js:10
(anonymous) @ Observable.js:27
errorContext @ errorContext.js:23
Observable2.subscribe @ Observable.js:23
(anonymous) @ catchError.js:9
(anonymous) @ lift.js:10
(anonymous) @ Observable.js:27
errorContext @ errorContext.js:23
Observable2.subscribe @ Observable.js:23
(anonymous) @ finalize.js:5
(anonymous) @ lift.js:10
(anonymous) @ Observable.js:27
errorContext @ errorContext.js:23
Observable2.subscribe @ Observable.js:23
doInnerSub @ mergeInternals.js:21
outerNext @ mergeInternals.js:15
OperatorSubscriber2._this._next @ OperatorSubscriber.js:14
Subscriber2.next @ Subscriber.js:32
(anonymous) @ innerFrom.js:51
Observable2._trySubscribe @ Observable.js:33
(anonymous) @ Observable.js:27
errorContext @ errorContext.js:23
Observable2.subscribe @ Observable.js:23
mergeInternals @ mergeInternals.js:54
(anonymous) @ mergeMap.js:20
(anonymous) @ lift.js:10
(anonymous) @ Observable.js:27
errorContext @ errorContext.js:23
Observable2.subscribe @ Observable.js:23
(anonymous) @ filter.js:6
(anonymous) @ lift.js:10
(anonymous) @ Observable.js:27
errorContext @ errorContext.js:23
Observable2.subscribe @ Observable.js:23
(anonymous) @ map.js:6
(anonymous) @ lift.js:10
(anonymous) @ Observable.js:27
errorContext @ errorContext.js:23
Observable2.subscribe @ Observable.js:23
(anonymous) @ tap.js:15
(anonymous) @ lift.js:10
(anonymous) @ Observable.js:27
errorContext @ errorContext.js:23
Observable2.subscribe @ Observable.js:23
(anonymous) @ catchError.js:9
(anonymous) @ lift.js:10
(anonymous) @ Observable.js:27
errorContext @ errorContext.js:23
Observable2.subscribe @ Observable.js:23
(anonymous) @ firstValueFrom.js:20
ZoneAwarePromise @ zone.js:2702
firstValueFrom @ firstValueFrom.js:5
(anonymous) @ app.config.ts:27
runInInjectionContext @ core.mjs:2454
runInitializers @ core.mjs:22338
(anonymous) @ core.mjs:34699
_callAndReportToErrorHandler @ core.mjs:22488
(anonymous) @ core.mjs:34697
invoke @ zone.js:369
onInvoke @ core.mjs:6494
invoke @ zone.js:368
run @ zone.js:111
run @ core.mjs:6346
bootstrap @ core.mjs:34653
internalCreateApplication @ core.mjs:37492
bootstrapApplication @ platform-browser.mjs:1192
(anonymous) @ main.ts:5
client:529 WebSocket connection to 'wss://localhost:4200/' failed: 
setupWebSocket @ client:529
fallback @ client:502
(anonymous) @ client:545
client:505 [vite] failed to connect to websocket.
your current setup:
  (browser) localhost:4200/ <--[HTTP]--> localhost:4200/ (server)
  (browser) localhost:4200/ <--[WebSocket (failing)]--> localhost:4200/ (server)
Check out your Vite / network configuration and https://vite.dev/config/server-options.html#server-hmr .
(anonymous) @ client:505
(anonymous) @ client:545
invokeTask @ zone.js:402
runTask @ zone.js:159
invokeTask @ zone.js:483
invokeTask @ zone.js:1138
globalCallback @ zone.js:1169
globalZoneAwareCallback @ zone.js:1202

Please provide the environment you discovered this bug in (run `ng version`)

ng version 19.0.5

Anything else?

No response

The text was updated successfully, but these errors were encountered:

UmbrellaCrow612 · 2025-03-21T15:48:49Z

Could the cli build tool not pick up this config option and change the vite config for it ?

alan-agius4 · 2025-03-24T08:52:40Z

Hi @UmbrellaCrow612, I tried this locally and I was not able to replicate this issue. Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

UmbrellaCrow612 · 2025-03-24T09:47:33Z

@alan-agius4 I made a new angular project using the cli cmd and then put the options i showed above in angular.json and generated certificates using below cmds

openssl genpkey -algorithm RSA -out ssl/private.key
openssl req -new -key ssl/private.key -out ssl/csr.csr
openssl x509 -req -in ssl/csr.csr -signkey ssl/private.key -out ssl/certificate.crt

Then ran it with npm start which ran ng serve did some changes and hot module reload worked without errors.

But for my project which shows these errors if i just run my front end and not my backend and i dont get the errors and hmr works fine with code changes.

But when i run my backend and it is able to make requests to it and i refresh my front end and make code changes i get the error again.

hmr dose not auto refresh when i make changes i have to manually fresh and still get errors

the repo is at

https://github.com/UmbrellaCrow612/PoliceCaseManagement/tree/master/src/web-client

you can just run the the the angular proj and generate certificates using the same cmds i did for above with npm ci and npm start the backend is just a dotnet proj just run the Identity.API project if you open the sln file

UmbrellaCrow612 · 2025-03-24T12:52:43Z

On the client bundle for Vite this bits throwing the err there isnt a hmrPort being set for some reason

alan-agius4 · 2025-03-24T13:38:51Z

@UmbrellaCrow612, there's no need to set hmrPort as it's automatically inferred from the directSocketHost. In fact, the error message above client:529 WebSocket connection to 'wss://localhost:4200/' failed confirms that the socket port is being correctly inferred.

I'm still unsure why you're experiencing this issue only when starting the backend server.

UmbrellaCrow612 · 2025-03-24T13:41:12Z

There running on different ports and there both over Https

UmbrellaCrow612 · 2025-03-24T13:52:26Z

@alan-agius4 Are you a able to reproduce it locally ?

alan-agius4 · 2025-03-24T13:55:24Z

@UmbrellaCrow612, without the backend I am not, and I didn't have time yet to configure .NET.

alan-agius4 · 2025-03-25T09:30:29Z

Hi @UmbrellaCrow612,

I’m still unable to replicate the issue using the project you provided.

Here’s what I did:

Terminal 1:

$ dotnet run --launch-profile https

Terminal 2:

$ ng serve --ssl --ssl-key ssl/private.key --ssl-cert ssl/certificate.crt

HMR worked correctly without any errors. In fact, in the network tab, I can see the status code of the WebSocket (WS) protocol switching successfully.

UmbrellaCrow612 · 2025-03-25T09:41:55Z

@alan-agius4 Unfortunately don't understand.

i tried doing the commands you provided but still am getting the errors.

It could be a machine thing or something wrong with my machine ?

Did you try making code changes while hmr was running and refreshing ?

If you still can't reproduce then i don't want to take to much of your time and you can just close the issue ?

alan-agius4 transferred this issue from angular/angular Mar 21, 2025

alan-agius4 added the needs: repro steps label Mar 24, 2025

alan-agius4 added needs: investigation and removed needs: repro steps labels Mar 25, 2025

UmbrellaCrow612 closed this as completed Mar 25, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Failed to connect to websocket. #29915

Failed to connect to websocket. #29915

UmbrellaCrow612 commented Mar 21, 2025

UmbrellaCrow612 commented Mar 21, 2025

alan-agius4 commented Mar 24, 2025

UmbrellaCrow612 commented Mar 24, 2025 •

edited

Loading

UmbrellaCrow612 commented Mar 24, 2025 •

edited

Loading

alan-agius4 commented Mar 24, 2025

UmbrellaCrow612 commented Mar 24, 2025

UmbrellaCrow612 commented Mar 24, 2025 •

edited

Loading

alan-agius4 commented Mar 24, 2025

alan-agius4 commented Mar 25, 2025

UmbrellaCrow612 commented Mar 25, 2025

Failed to connect to websocket. #29915

Failed to connect to websocket. #29915

Comments

UmbrellaCrow612 commented Mar 21, 2025

Which @angular/* package(s) are the source of the bug?

Is this a regression?

Description

Please provide a link to a minimal reproduction of the bug

Please provide the exception or error you saw

Please provide the environment you discovered this bug in (run ng version)

Anything else?

UmbrellaCrow612 commented Mar 21, 2025

alan-agius4 commented Mar 24, 2025

UmbrellaCrow612 commented Mar 24, 2025 • edited Loading

UmbrellaCrow612 commented Mar 24, 2025 • edited Loading

alan-agius4 commented Mar 24, 2025

UmbrellaCrow612 commented Mar 24, 2025

UmbrellaCrow612 commented Mar 24, 2025 • edited Loading

alan-agius4 commented Mar 24, 2025

alan-agius4 commented Mar 25, 2025

UmbrellaCrow612 commented Mar 25, 2025

Please provide the environment you discovered this bug in (run `ng version`)

UmbrellaCrow612 commented Mar 24, 2025 •

edited

Loading

UmbrellaCrow612 commented Mar 24, 2025 •

edited

Loading

UmbrellaCrow612 commented Mar 24, 2025 •

edited

Loading