angular 11 throws net::ERR_SSL_PROTOCOL_ERROR

See original GitHub issue

🐞 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

Run ng serve in ClientApp folder
Run dotnet run in the root folder
Open the browser at https://localhost:5001/
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

Issue Analytics

State:
Created 3 years ago
Reactions:4
Comments:11 (1 by maintainers)

Top GitHub Comments

4reactions

alan-agius4commented, Nov 17, 2020

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.

4reactions

jr01commented, Nov 16, 2020

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"))