Failed to connect to websocket.

[UmbrellaCrow612]

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

[UmbrellaCrow612]

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

[alan-agius4]

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]

@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]

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

[alan-agius4]

@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]

There running on different ports and there both over Https

[UmbrellaCrow612]

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

[alan-agius4]

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

[alan-agius4]

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]

@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 ?