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

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](https://github.com/angular/angular-cli/blob/cf2f30afc0ad0ceae34c457955a22186bc5ce60d/packages/angular_devkit/build_angular/src/webpack/configs/dev-server.ts#L333) 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

[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 https://github.com/microsoft/reverse-proxy/discussions/1954#discussioncomment-4329533.

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