Angular 15: webpack dev server websocket URL should use port number specified in config instead of hardcoding 0

[prabh-62]

Command

serve

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

When serving angular 15 application behind a reverse proxy on different port, webpack dev server fails to live-reload.

Specifically, this line of code should use options.port rather than hardcoding 0
[dev-server.ts#L333](

angular-cli/packages/angular_devkit/build_angular/src/webpack/configs/dev-server.ts

Line 333 in cf2f30a

return `auto://${publicHost || '0.0.0.0:0'}${webSocketPath}`;

)
should become

    return `${options.sslKey === undefined ? 'ws': 'wss'}://${publicHost || options.host}:${options.port}${webSocketPath}`;

Minimal Reproduction

• Create an angular 15 application
  • Serve the app : ng serve --project teddyBear --port 4201
• Launch a reverse proxy which serves on different host and/or port and just returns the angular 15 app files.
  • Even though the angular app might serve, live-reload should fail

Exception or Error

[webpack-dev-server] Server started: Hot Module Replacement disabled, Live Reloading enabled, Progress disabled, Overlay enabled.
WebSocket connection to 'ws://localhost/ng-cli-ws' failed: 
[webpack-dev-server] Trying to reconnect...

Your Environment

Angular CLI: 15.0.2
Node: 18.12.1
Package Manager: yarn 1.22.19
OS: darwin arm64

Angular: 15.0.2
... animations, cli, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1500.2
@angular-devkit/build-angular   15.0.2
@angular-devkit/core            15.0.2
@angular-devkit/schematics      15.0.2
@angular/cdk                    15.0.1
@schematics/angular             15.0.2
ng-packagr                      15.0.1
rxjs                            7.5.7
typescript                      4.8.4

Anything else relevant?

No response

[prabh-62]

If you conclude that this bug should be fixed, I can try to create a pull request

[alan-agius4]

Hi @prabh-62,

This appears to be an issue with your reverse proxy configuration does not seem to handle web sockets and is only forward HTTP traffic.

[prabh-62]

I created a new angular 15 app and reproduced the bug. Websockets are enabled. Here is the link to git repo: https://github.com/prabh-62/angular-15-proxy-websocket-url-bug

If you try editing the websocket URL as mentioned in the issue(file: web-apps/node_modules/@angular-devkit/build-angular/src/webpack/configs/dev-server.js), the live-reload should start working again

[alan-agius4]

Hi @prabh-62,

Thanks for the reproduction. Again, this seems to be an issue with the proxy configuration which unfortunately, I cannot assist much as I am not too familiar with the new APIs as I have not used .NET for almost a decade.

I did however created a proxy using a couple of JS lines that does what you want and demonstrates that live-reload works out of the box without requiring any changes.

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');

express()
  .use(
    '/command-center',
    createProxyMiddleware({
      target: 'http://localhost:4201',
      pathRewrite: { '^/command-center': '' },
      changeOrigin: true,
      ws: true,
    })
  )
  .listen(80);

A simple way to test that the proxy is forwarding WS connects and is working as expected is to use wscat.

$ npx wscat -c ws://localhost/ng-cli-ws 
error: connect ECONNREFUSED 127.0.0.1:80 // Oops proxy is not forwarding WS :(.

$ npx wscat -c ws://localhost/ng-cli-ws
Connected (press CTRL+C to quit)
< {"type":"error","data":"Invalid Host/Origin header"}
Disconnected (code: 1005, reason: "")

// Yay our proxy is forwarding WS :).

If you are still having trouble to set to a proxy that forwards web sockets, you could you use --public-host option.

ng serve --project command-center --port 4201 --public-host=http://localhost:4201

[prabh-62]

Interesting, the express app code snippet you provided does work. 👏

I should probably ask .NET people(dotnet/yarp#1954) for help with proxy. I will close the issue in a couple of days if the issue is on their side.

I did try the --public-host=http://localhost:4201 workaround you suggested, however it won't work if proxy is HTTPS and angular app is HTTP

[prabh-62]

I just used caddy server as reverse proxy and it failed to server web-socket as well

I tried setting baseHref option in angular.json however, it failed with the same result.

[prabh-62]

Interesting, the express app code snippet you provided does work. 👏

Actually, I was quick to jump. The express app code snippet fails if we have 2 apps within angular workspace.

You can try 2-apps branch: https://github.com/prabh-62/angular-15-proxy-websocket-url-bug/tree/2-apps

[alan-agius4]

The problem here is that you have two applications using the same Websocket path (ws://localhost/ng-cli-ws) which causes a conflict.

In this case you need to configure the the dev-server using the serve-path option so that each application gets a dedicated WS path.

ng serve --project command-center --port 4201 --serve-path=/command-center
ng serve --project support-panel --port 4202 --serve-path=/support-panel

The proxy will then need to be adjusted to cater for the serve paths by removing the path rewrites.

diff --git a/nodejs-based-proxy/index.js b/nodejs-based-proxy/index.js
index f780ac2..526595e 100644
--- a/nodejs-based-proxy/index.js
+++ b/nodejs-based-proxy/index.js
@@ -8,7 +8,6 @@ express()
     "/command-center",
     createProxyMiddleware({
       target: "http://localhost:4201",
-      pathRewrite: { "^/command-center": "" },
       changeOrigin: true,
       ws: true,
     })
@@ -17,7 +16,6 @@ express()
     "/support-panel",
     createProxyMiddleware({
       target: "http://localhost:4202",
-      pathRewrite: { "^/support-panel": "" },
       changeOrigin: true,
       ws: true,
     })

http://localhost/command-center/  ->  http://localhost:4201/command-center/
ws://localhost/command-center/ng-cli-ws  ->  ws://localhost:4201/command-center/ng-cli-ws
http://localhost/support-panel/  ->  http://localhost:4202/support-panel/
ws://localhost/support-panel/ng-cli-ws  ->  ws://localhost:4202/support-panel/ng-cli-ws

This should also address the comment in dotnet/yarp#1954 (comment).

Based on your proxy setup you might also end up using the public-host option. See: https://angular.io/cli/serve for more information about the dev-server options.

Closing this issue as there does not appear to be a bug here. This issue tracker is not suitable for support, please repost your issue on StackOverflow using tag angular-cli.

[prabh-62]

The problem here is that you have two applications using the same Websocket socket path (ws://localhost/ng-cli-ws) which causes a conflict.

In this case you need to configure the the dev-server using the serve-path option so that each application gets a dedicated WS path.

ng serve --project command-center --port 4201 --serve-path=/command-center
ng serve --project support-panel --port 4202 --serve-path=/support-panel

Thank you for the suggestion. This is exactly what I was looking for

[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.}