Skip to content

ng serve does not respond to http2 headers #21293

Closed
@judos

Description

@judos

🐞 Bug report

Command (mark with an x)

  • serve

Is this a regression?

Unsure.

Description

ng serve does not respond to requests containing both of these headers:

Connection: Upgrade, HTTP2-Settings
Upgrade: h2c

This happens when specific clients connect to Angular such as Java Rest clients (java.net.http.HttpClient)

🔬 Minimal Reproduction

Setup a new Angular project. Dependencies see below package.json file. (probably doesn't matter too much).
Serve the project:

ng serve

Curl to get responses. First without http2 headers works fine:

$ curl -sv "http://localhost:4200"
*   Trying 127.0.0.1:4200...
* TCP_NODELAY set
* Connected to localhost (127.0.0.1) port 4200 (#0)
> GET / HTTP/1.1
> Host: localhost:4200
> User-Agent: curl/7.68.0
> Accept: */*
>
* Mark bundle as not supporting multiuse
< HTTP/1.1 200 OK
< X-Powered-By: Express
< Access-Control-Allow-Origin: *
< Accept-Ranges: bytes
< Content-Type: text/html; charset=UTF-8
< Content-Length: 530
< ETag: W/"212-LsOzC7gYUUzQpCEaiFFaZD+o1Zc"
< Date: Tue, 06 Jul 2021 14:48:06 GMT
< Connection: keep-alive
< Keep-Alive: timeout=5
<
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Test</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.css"></head>
<body>
  <app-root></app-root>
<script src="runtime.js" defer></script><script src="polyfills.js" defer></script><script src="styles.js" defer></script><script src="vendor.js" defer></script><script src="main.js" defer></script></body>
</html>
* Connection #0 to host localhost left intact

Second with Http2 headers gets stuck and never returns:

$ curl -sv "http://localhost:4200" -H "Connection: Upgrade, HTTP2-Settings" -H "Upgrade: h2c"
*   Trying 127.0.0.1:4200...
* TCP_NODELAY set
* Connected to localhost (127.0.0.1) port 4200 (#0)
> GET / HTTP/1.1
> Host: localhost:4200
> User-Agent: curl/7.68.0
> Accept: */*
> Connection: Upgrade, HTTP2-Settings
> Upgrade: h2c
>

🔥 Exception or Error


None, no response is returned by ng serve. Connection is left open. ng serve --verbose=true does not report any warning or error

🌍 Your Environment


Angular CLI: 11.2.5
Node: 14.17.0
OS: win32 x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1102.5
@angular-devkit/build-angular   0.1102.5
@angular-devkit/core            11.2.5
@angular-devkit/schematics      11.2.5
@angular/cli                    11.2.5
@schematics/angular             11.2.5
@schematics/update              0.1102.5
rxjs                            6.6.6
typescript                      4.1.5

Anything else relevant?

Here's my package.json:

{
  "name": "test",
  "version": "0.0.1",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build-test": "ng build",
    "build": "ng build --prod"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~11.2.6",
    "@angular/common": "~11.2.6",
    "@angular/compiler": "~11.2.6",
    "@angular/core": "~11.2.6",
    "@angular/forms": "~11.2.6",
    "@angular/platform-browser": "~11.2.6",
    "@angular/platform-browser-dynamic": "~11.2.6",
    "@angular/router": "~11.2.6",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1102.5",
    "@angular/cli": "~11.2.5",
    "@angular/compiler-cli": "~11.2.6",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.1.5"
  }
}

Activity

alan-agius4

alan-agius4 commented on Jul 6, 2021

@alan-agius4
Collaborator

Both webpack-dev-server and express which are used under the hood don't support HTTP2.

From
https://webpack.js.org/configuration/dev-server/#devserverhttp2

Serve over HTTP/2 using spdy. This option is ignored for Node 10.0.0 and above, as spdy is broken for those versions. The dev server will migrate over to Node's built-in HTTP/2 once Express supports it.

Related issues
expressjs/express#2761
webpack/webpack-dev-server#1713

judos

judos commented on Jul 6, 2021

@judos
Author

Ok sure. but how about logging something such that it is easier to see why suddenly nothing works?
I takes hours to debug such an issue when there is zero information in logs.

In Java you can workaround using this code when building your request:

HttpRequest.newBuilder(URI(uri)).version(HttpClient.Version.HTTP_1_1)
angular-automatic-lock-bot

angular-automatic-lock-bot commented on Aug 6, 2021

@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.

locked and limited conversation to collaborators on Aug 6, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @judos@alan-agius4

        Issue actions

          ng serve does not respond to http2 headers · Issue #21293 · angular/angular-cli