Aspnetcore: 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:5001is trying to poll on https version of url i.ehttps://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.

[msftbot[bot]]

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.