After upgrading from 12 to 13, the live reload websocket URL path /ws/ conflicts with the application when using the same path

[brmc]

🐞 Bug report

Command

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• extract-i18n
• run
• config
• help
• version
• doc

Is this a regression?

yes, this worked before upgrading from 12.1.1

Description

For a couple years at work, we have used /ws/ as the root path for websocket connections. After upgrading to angular 13 this is no longer compatible with the live re-loader because its url has been changed from /socket-nodejs/xxx/xxx/websocket to /ws/ which conflicts with the http proxy in my case.

This results in the client continuously attempting to establish a connection with ERR_STREAM_WRITE_AFTER_END displayed in the dev server console.

I followed the upgrade guide for a complex app, but didn't see anything relevant to this change: https://update.angular.io/?l=3&v=12.0-13.0

🔬 Minimal Reproduction

1. Start a server on localhost:8000 that establishes a websocket connections on /ws/ (the actual establishment might not be a necessary step)
2. Route all /ws/ requests to that server in your proxy.config.json:

{
  "/ws": {
    "target": "http://localhost:8000",
    "secure": false,
    "ws": true
  }
}

3. run ng serve
4. Check either the dev server console to see the exception above, or watch the network tab in the browser to see the attempts to establish a connection over and over

🔥 Exception or Error

 [webpack-dev-server] [HPM] WebSocket error: Error [ERR_STREAM_WRITE_AFTER_END]: write after end
     at new NodeError (node:internal/errors:371:5)
     at _write (node:internal/streams/writable:319:11)
     at Socket.Writable.write (node:internal/streams/writable:334:10)
     at Sender.sendFrame (/home/brian/dev/preondock/node_modules/webpack-dev-server/node_modules/ws/lib/sender.js:469:20)
     at Sender.close (/home/brian/dev/preondock/node_modules/webpack-dev-server/node_modules/ws/lib/sender.js:197:12)
     at WebSocket.close (/home/brian/dev/preondock/node_modules/webpack-dev-server/node_modules/ws/lib/websocket.js:300:18)
     at Receiver.receiverOnConclude (/home/brian/dev/preondock/node_modules/webpack-dev-server/node_modules/ws/lib/websocket.js:1114:18)
     at Receiver.emit (node:events:526:28)
     at Receiver.controlMessage (/home/brian/dev/preondock/node_modules/webpack-dev-server/node_modules/ws/lib/receiver.js:582:14)
     at Receiver.getData (/home/brian/dev/preondock/node_modules/webpack-dev-server/node_modules/ws/lib/receiver.js:429:42) {
   code: 'ERR_STREAM_WRITE_AFTER_END'
 }

🌍 Your Environment

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 13.3.7
Node: 16.14.2
Package Manager: yarn 1.22.5
OS: linux x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1303.7
@angular-devkit/build-angular   13.3.7
@angular-devkit/core            13.3.7
@angular-devkit/schematics      13.3.7
@angular/cdk                    13.3.8
@angular/cli                    13.3.7
@schematics/angular             13.3.7
rxjs                            6.6.7
typescript                      4.6.4
    

Anything else relevant?

It would be nice if the live reload path was made configurable

[alan-agius4]

In this case probably we can just rename the web socket path to something else.

[brmc]

That would be greatly appreciated

If you do this, is there any chance it would be released before july?

[alan-agius4]

@brmc, I opened a PR with a fix #23266. Once merged it will be released later on next week as part of version 14.0.x.

[brmc]

@alan-agius4, thank you!

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