aspnetcore: Asp.Net Core 5.0 and Angular 11 sockjs-node error
A simple asp.net core 5.0 project create using dotnet new angular then upgraded angular to latest Angular 11 and hot reload doesn’t work and gives following error in browser console:
It works until Angular 10. This might give impression that something is broken between Angular 10 and 11. But if the same Angular 11 project is visited using https://localhost:51675 or whatever port .net runs angular app it works fine and it connects to hmr server.
One thing to note is that until Angular 10 it connects for sockjs-node on http, while .net core 5 it is trying to connect on https, which fails as can be seen in above error screenshot. I have tried disabling app.UseHttpsRedirection(); line in Startup.cs but same error.
To Reproduce
Minimal repo:
https://github.com/asadsahi/dotnet-angular11
Further technical details
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Reactions: 7
- Comments: 29 (10 by maintainers)
I have a bit of a different issue with sockjs but @mkArtakMSFT feels that it is a dup of this issue (#27790). I am continuing to see this issue after having updated my Angular app to Angular 11.0.2, Angular CLI 11.0.2 and angular-devkit/build-angular 0.1100.2, every time the browser reloads:
sockjs.js:2999 WebSocket connection to 'wss://localhost:44300/sockjs-node/.../websocket' failed: WebSocket is closed before the connection is establishedAn impact of this error is that Live Reload does not work.
Closing this issue now. The “WebSocket closed before connection established” is unrelated to SSL issues.
In the github issue linked above, jr01 shows a workaround that seems to eliminate the ERR_SSL_PROTOCOL_ERROR. It consists of appending:
--publicHost=localhost:44300(where you would replace your appropriate port value where the 44300 is) to the end of the ng serve command.
Thank you for posting this. I was just about to file the same bug. Luckily, I immediately got to work on the fix.
Not sure why it broke but the problem appears to be in AngularCliMiddleware.cs which awaits ng serve to start serving strictly over HTTP. When trying to serve over HTTPS (by adding “-ssl” to “start” script of package.json), the middleware times out. My fix allows the middleware to listen to whatever the URL gets reported by ng serve, not just HTTP. This seems correct even if this bug never existed.
Created a pull request.
I have tested if further, and created a new problem report with more data coming from Chrome, Edge, and Firefox
https://developercommunity2.visualstudio.com/t/webpack-live-reloading-broke-when-i-moved-from-net/1313178
Let’s see if this helps solving this issue.
I’m still using Angular 10. I only had to update to .Net 5.0.1, and the warning that breaks the auto update on changes, started appearing.
sockjs.js:2999 WebSocket connection to 'wss://localhost:44379/sockjs-node/368/fzqwaauo/websocket' failed: WebSocket is closed before the connection is established.Any news on how to solve this?
but why would someone wants to run with angular with
ng serve --ssljust because the fix needs to work. Has this become a requirement now that angular cli project needs to run in a certain way to satisfy .net?Bear in mind --ssl flag in angular hard codes the URL to always redirect to https once done. so I have to delete localhost from:
chrome://net-internals/#hsts…if I have to revert back to non http version.
@gunsh if you mean serving dotnet application without ssl, then that workaround does the magic 😃