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?