angular 11 throws net::ERR_SSL_PROTOCOL_ERROR

[snebjorn]

🐞 bug report

Affected Package

The issue is caused by package @angular/cli or @angular/core

Is this a regression?

Yes, the previous version in which this bug was not present was: 10.2.3

Console output in Angular 11:

Description

It was working in Angular 10.

Console output:

🔬 Minimal Reproduction

Clone https://github.com/snebjorn/dotnet-angular11

1. Run ng serve in ClientApp folder
2. Run dotnet run in the root folder
3. Open the browser at https://localhost:5001/
4. Observe the errors

🌍 Your Environment

Angular Version:

Angular CLI: 11.0.1
Node: 12.16.1
OS: win32 x64

Angular: 11.0.0
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1001.2
@angular-devkit/build-angular   0.1100.1
@angular-devkit/core            10.1.2
@angular-devkit/schematics      11.0.1
@angular/cli                    11.0.1
@schematics/angular             11.0.1
@schematics/update              0.1100.1
rxjs                            6.6.3
typescript                      4.0.5

Anything else relevant?

The frontend is accessed via https://localhost:5001 because it's "hosted" with ASP.NET Core using spa.UseProxyToSpaDevelopmentServer("http://localhost:4200");. See https://docs.microsoft.com/en-us/aspnet/core/client-side/spa/angular?view=aspnetcore-5.0&tabs=visual-studio

The self-signed localhost certificate is trusted. dotnet dev-certs https -t. See https://docs.microsoft.com/en-us/aspnet/core/security/enforcing-ssl?view=aspnetcore-5.0&tabs=visual-studio#trust-the-aspnet-core-https-development-certificate-on-windows-and-macos

[atscott]

@alan-agius4 - Is this a CLI issue? I saw in the discord channel a mention about something similar, "ng serve --host 0.0.0.0 --public-host http://localhost worked to get the development websocket talking through a reverse proxy setup."

[alan-agius4]

@atscott, yeah I’ll take a look at it.

[alan-agius4]

@snebjorn, can you try to set the publicHost option under dev-server to https://localhost:5001?

[prabh-62]

Alan, adding publicHost option doesn't help. Scheme should be http not https

[alan-agius4]

Let me get back to you in this tomorrow.

[snebjorn]

I stumpled upon this dotnet/aspnetcore#27790 seems relevant :)

[jr01]

I experience the same issue, but the workaround ng serve --publicHost=localhost:44300 does work for me.

My setup

• ng serve with all default settings.
• asp.net core SPA services proxy builder.UseProxyToSpaDevelopmentServer("http://localhost:4200"); and asp.net Kestrel server runs on https://localhost:44300

In Angular 10 when navigating to https://localhost:44300 Angular makes a call to https://localhost:44300/sockjs-node/.... and live reload works.

In Angular 11 when navigating to https://localhost:44300 Angular makes a call to http://localhost:4200/sockjs-node/.... which gets blocked by the browser (CSP).

In Angular 11 vendor.js I notice:

socket(socketUrl, onSocketMessage);
/* WEBPACK VAR INJECTION */}.call(this, "?http://localhost:4200&sockPath=/sockjs-node"))

As mentioned with ng serve --publicHost=localhost:44300 live reload works in Angular 11 and the vendor.js contains
.../* WEBPACK VAR INJECTION */}.call(this, "?http://localhost:44300&sockPath=/sockjs-node"))

[erictor]

The ERR_SSL issue described here gets resolved now with Angular 11.1 / Angular CLI 11.2. However for me it did not resolve the other issue I've been experiencing which is that Live Reload is still getting killed because the error:

sockjs.js:2999 WebSocket connection to 'wss://localhost:44300/sockjs-node/.../websocket' failed: WebSocket is closed before the connection is established

occurs for me nearly every time the browser reloads.

[prabh-62]

I created #19406 as a separate issue since there could be a different issue with dotnet AspNetCore template and I don't want to hijack this thread

[alan-agius4]

Hi all,

Thanks all for the input and all the users who provided the reproductions. I diid look at both reproductions this morning (https://github.com/prabh-62/angular-reverse-proxy and https://github.com/snebjorn/dotnet-angular11)

I will be creating a PR with a fix for this shortly. As a workaround you can use --public-host=0.0.0.0:0

Thanks.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}