Asp.Net Core 5.0 and Angular 11 sockjs-node error

[asadsahi]

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

[gunsh]

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.

[asadsahi]

@gunsh thanks for that, is there a temporary workaround I can have on my side until a new release of this middleware with the fix is out?

[gunsh]

@asadsahi There are two workarounds that I know of. First is simple: serve your site locally without ssl support. I have tried this and it worked for me.

Second is to build everything from source and reference your locally built copy in NuGet package manager.

Actually, there is the third one which involves copying just a the referenced code files straight into your project and using those instead of the actual library - but that is probably the least preferred method (with potential legal/ethical issues as well).

[asadsahi]

@gunsh as far as I know angular cli doesn't run the project with ssl by default unless you enabled through command ng serve --ssl true or in angular.json file.

When I see the terminal angular is running on non https url i.e http://localhost:4200. But https://localhost:5001` is trying to poll on https version of url i.e https://localhost:4200/sockjs-node/info?t=xxxx and ended up with the error that I've shown in screenshot above.

However, I have tried disabling ssl by passing '--ssl false' in ng serve, also, I'have tried using the source from your fix from your branch. But I am having the same issue.

Confusing thing is it works with dotnet 5 + Angular 10 or Angular 11 on its own. But dotnet + Angular 11 project is broken with this error.

[asadsahi]

@gunsh if you mean serving dotnet application without ssl, then that workaround does the magic :)

[gunsh]

@asadsahi In terms of the first workaround I was talking about running your whole ASP.NET site over HTTP rather than HTTPS. You are right that angular cli runs without ssl support by default so if you run your ASP.NET on HTTP rather than HTTPS, the two will match and WDS will work. Also, if you are using app.UseHttpsRedirection() you will probably have to remove it for this to work.

If you want to use my fix instead, you will have to modify "start" script in package.json to read: "ng serve --ssl".

[gunsh]

@asadsahi Yes, "serving dotnet app without ssl" was the first workaround. I am glad it works for you.

[asadsahi]

@gunsh I am struggling to verify if your fix is working, I have tried to copy the source from your fix and build project using the AngularCliMiddleware code just to verify, and realised I am using UseProxyToSpaDevelopmentServer:

                    // spa.UseAngularCliServer(npmScript: "start");
                    spa.UseProxyToSpaDevelopmentServer("http://localhost:4200");

But for some reason both options ended up with the same error. Do you think I am missing something?

[gunsh]

@asadsahi If you are to copy all the right files you should keep on using spa.UseAngularCliServer(npmScript: "start") with the addition of "--ssl" to "ng serve". That is all.

[asadsahi]

@ganik your fix definitely is not working for dotnet running under https:

Here is the same repo I have referenced above but with your fixed version of AngularCliMiddleware code added in the project:

https://github.com/asadsahi/dotnet-angular11

if you run it, you'll see the same error.

[gunsh]

@asadsahi You have "start": "ng serve --hmr" rather than "start": "ng serve --ssl" so for starters you failed to follow the instructions. Can you please try again?

[asadsahi]

but why would someone wants to run with angular with ng serve --ssl just 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.

[asadsahi]

--hmr is a new option since angular 11, so that shouldn't be a problem of course.

Just to clarify that I am not passing in --ssl anymore because I am using the fixed version of the code by copying the files from your PR.

[gunsh]

Well, I am really sorry but please note I am a developer just like yourself. I am in no way affiliated with ASP.NET core team. I am merely trying to help.

I am not saying that anything has to work one way or the other. I have proposed a fix which you can take or leave. It is up to you. I am not saying that the PR will even be accepted but it does solve the problem for me. Your mileage may vary. If there is a better way to do this, I am sure ASP.NET team will come up with it. I am hoping sooner rather than later because I hate workarounds, even if they are my own.

You can always revert to serving the non-HTTPS version of your ASP.NET site.

[asadsahi]

@gunsh apologies that I am taking your PR very seriously thinking you have authored this code before 😆

However I can say your Fix doesn't cover all the variations of angular cli it had before.

Thanks for your help anyway. 👍

[gunsh]

I am fully aware that one has to add "--ssl" in order to make this work and I am also fully aware that the PR might get rejected, but I do think that there is value in it because if one wanted to actually run angular dev web server with "--ssl", the current ASP.NET denies this. My fix allows this to happen without hurting the existing behavior + it offers a fix (not ideal) for the current problem. Perhaps someone is already working on a "proper" resolution of this issue.

So even though my fix doesn't cover all the variations of angular cli, I can too say that the existing code just as well as-is does not cover all variations either. I believe my fix is a move in the right direction although potentially not a complete solution that pleases everybody.

I am at least happy to have a temporary workaround.

[ghost]

Thanks for contacting us.
We're moving this issue to the Next sprint planning milestone for future evaluation / consideration. We will evaluate the request when we are planning the work for the next milestone. To learn more about what to expect next and how this issue will be handled you can read more about our triage process here.

[erictor]

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.

[andlewis]

Erictor's fix worked great for me. No --ssl just this:

--publicHost=localhost:44300

[asadsahi]

Just upgraded angular (11.0.1) + angular cli (11.0.2) released moments ago and everything works for me without any workaround 🎉 .

[erictor]

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 established

An impact of this error is that Live Reload does not work.

[jlquijada]

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 established

An impact of this error is that Live Reload does not work.

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?

[erictor]

@jlquijada, your scenario more helpful than mine, because I changed the version of Angular (10 to 11), the version of .NET (3.1 to 5.0) and the version of Visual Studio all at the same time with no real testing inbetween. In retrospect, perhaps that wasn't the most clever thing I've ever done. Your scenario is "I moved to .NET 5 and this problem started happening". That is way more helpful.

Here's the history of my issue with this so far:

https://developercommunity2.visualstudio.com/t/Webpack-Live-Reloading-is-broken-in-VS-2/1256591?preview=true

#28038

sockjs/sockjs-client#527

Unless someone is feverishly looking into this behind the scenes before messaging about it on Developer Community or GitHub, it's not feeling (to me) like I can look forward to this being solved or even advised-on in the near term.

Maybe you could put in a new issue on a forum that is more focused on issues brought about by moving to .NET 5?

[jlquijada]

@jlquijada, your scenario more helpful than mine, because I changed the version of Angular (10 to 11), the version of .NET (3.1 to 5.0) and the version of Visual Studio all at the same time with no real testing inbetween. In retrospect, perhaps that wasn't the most clever thing I've ever done. Your scenario is "I moved to .NET 5 and this problem started happening". That is way more helpful.

Here's the history of my issue with this so far:

https://developercommunity2.visualstudio.com/t/Webpack-Live-Reloading-is-broken-in-VS-2/1256591?preview=true

#28038

sockjs/sockjs-client#527

Unless someone is feverishly looking into this behind the scenes before messaging about it on Developer Community or GitHub, it's not feeling (to me) like I can look forward to this being solved or even advised-on in the near term.

Maybe you could put in a new issue on a forum that is more focused on issues brought about by moving to .NET 5?

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.

[snebjorn]

I believe this is fixed. Close?

[jlquijada]

I'm still experiencing the problem. I have the .Net 5 and Visual Studio 2019 updated to the maximum. Why so haste to close this? On the other thread, there is nothing indicating that it is solved. Not even a "it is fixed on the next version"

[erictor]

We do have another issue, #29478, open (and, I hope, under active investigation) for the "WebSocket Closed before Connection Established" issue. This issue, #27790, was primarily about an SSL_PROTOCOL_ERROR which I believe as been resolved (at least, I'm not experiencing that issue anymore). Thoughts?

[snebjorn]

This issue, #27790, was primarily about an SSL_PROTOCOL_ERROR which I believe as been resolved (at least, I'm not experiencing that issue anymore). Thoughts?

The SSL_PROTOCOL_ERROR is indeed resolved angular/angular-cli#19403
At least for me and my colleagues.

I'm in favor of closing and tracking the "WebSocket Closed before Connection Established" issue via #29478
Alternatively this issue could be rephrased as it seems to revolve around SSL_PROTOCOL_ERROR

[captainsafia]

Closing this issue now. The "WebSocket closed before connection established" is unrelated to SSL issues.