[BUG] - Node 18 - ng serve - something has changed in Node v18

[nawlbergs]

Which @angular/* package(s) are the source of the bug?

Don't known / other

Is this a regression?

No

Description

Not sure if this is an issue with Angular or webpack-dev-server... but here goes:

I use a docker apache proxy locally so my dev env is more like production: www.myapp.local instead of localhost:4200
But when I try to bump node up to v18... the angular proxy falls apart and does not work. The node api proxy works fine, its just the angular connection that breaks.

I start node like this

$ npx ng serve --hmr --disable-host-check --port 4200 --public-host=www.myapp.local --project=myapp

host file (pretty typical)

127.0.0.1 www.myapp.local // <-- my app
...  
# Added by Docker Desktop
10.0.0.225 host.docker.internal
10.0.0.225 gateway.docker.internal
# To allow the same kube context to work on the host and the container:
127.0.0.1 kubernetes.docker.internal
# End of section

my docker apache (nothing crazy here): FROM php:5.6-apache

Define local_node "http://host.docker.internal:3333"
Define local_app "http://host.docker.internal:4200"

<VirtualHost *:80>
  DocumentRoot "/var/www/html"
  DirectoryIndex index.php index.html

  <Location /api>
      Order allow,deny
      Allow from all
      ProxyPass ${local_node}
      ProxyPassReverse ${local_node}
  </Location>

  <Location /app>
      Order allow,deny
      Allow from all
      ProxyPass ${local_app}/app
      ProxyPassReverse ${local_app}/app
  </Location>
</VirtualHost>

If on v18 the proxy does not work... apache error:

php-apache   | [Thu Dec 15 18:53:58.110169 2022] [proxy:error] [pid 17] (111)Connection refused: AH00957: HTTP: attempt to connect to 192.168.65.2:4200 (host.docker.internal) failed

php-apache   | [Thu Dec 15 18:53:58.110198 2022] [proxy_http:error] [pid 17] [client 172.18.0.1:41480] AH01114: HTTP: failed to make connection to backend: host.docker.internal, referer: http://www.myapp.local/

Again... the node/api proxy still works fine.

I was able to get it to "kinda" work in v18 by setting --host=0.0.0.0 as well... but the hrm websockets were throwing errors in the client... so... after several hours of trying... I could not get this setup to work in v18.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

php-apache   | [Thu Dec 15 18:53:58.110169 2022] [proxy:error] [pid 17] (111)Connection refused: AH00957: HTTP: attempt to connect to 192.168.65.2:4200 (host.docker.internal) failed

php-apache   | [Thu Dec 15 18:53:58.110198 2022] [proxy_http:error] [pid 17] [client 172.18.0.1:41480] AH01114: HTTP: failed to make connection to backend: host.docker.internal, referer: http://www.myapp.local/

Please provide the environment you discovered this bug in (run ng version)

windows 10
node 18.12.1
npm 8.10.0
php:5.6-apache
"@angular/animations": "15.0.0",
"@angular/cdk": "15.0.0",
"@angular/common": "15.0.0",
"@angular/compiler": "15.0.0",
"@angular/core": "15.0.0",
"@angular/forms": "15.0.0",
"@angular/material": "15.0.0",
"@angular/platform-browser": "15.0.0",
"@angular/platform-browser-dynamic": "15.0.0",
"@angular/router": "15.0.0",

Anything else?

Might be webpack-dev-server issue and unrelated to angular in general?

[kevindqc]

Had a similar issue, and had to use --host 0.0.0.0 to fix it

[nawlbergs]

did you have any issues with hmr (hot module reloading) after setting to 0.0.0.0?

[kevindqc]

Sorry I don't use hmr, so I didn't see any issue for that

My understanding is that using 0.0.0.0 makes the port open for any of your IPs (ie: if you have 2 network cards, or have virtual networks) instead of just a specific one, so not sure it should have an impact?

[nawlbergs]

@alan-agius4 I see you transferred this issue.. not sure how to see where it was transferred to...

breaks in 18

"start": "npx ng serve --hmr --disable-host-check --port 4200 --public-host=www.myapp.local --project=myapp"

this does work

"start": "npx ng serve --hmr --disable-host-check --port 4200 --public-host=0.0.0.0:4200 --host=0.0.0.0 --project=myapp"

So... I guess this issue can be closed... tho it would be nice to know what changed to break it.

[alan-agius4]

@alan-agius4 I see you transferred this issue.. not sure how to see where it was transferred to...
It was transferred from angular/angular to this repo angular/angular-cli

So... I guess this issue can be closed... tho it would be nice to know what changed to break it.

From our end nothing changed as we use webpack-dev-server under the hood. Probably what is happening here is that the hostname was not being resolved correctly. See: webpack/webpack-dev-server#416 (comment)

[Franiac]

Interesting this gets closed. I mean, it may be fact that you did not change anything, but another fact is that anyone generating a new project via CLI cannot hit breakpoints when using Node 18 with the default configuration. In other words: ng new is borked by default with Node 18.

I don't know how serious you rate this, but I think it is bad for anyone starting out with the CLI and trying to get the debugger running.

[alan-agius4]

@Franiac, from what you are describing you are experiencing a different problem.

[Franiac]

@alan-agius4 true, created and referenced the new issue 😄

[alan-agius4]

After looking into another issue, Node.js 18 no longer prefers IPv4 over IPV6 Instead, it will now respect the order that is returned based on the dns entries. This means that it's not guaranteed that localhost is resolved to 127.0.0.1. See: nodejs/node#39987

[Franiac]

@alan-agius4 What does that mean for the default projects of Angular/CLI?

--host=127.0.0.1 is a valid workaround then. But how do you plan to adjust for the Node 18 changes?

[alan-agius4]

Technically, Node.js is doing the right thing here as it is respecting the OS settings.

For the vscode issue (#24601) which incorrectly assumes that localhost is resolved to 127.0.0.1 there are two workarounds until the issue is fixes on their end.

1. Use --host=127.0.0.1 (This will cause breakages if you are using proxies that rely on the localhost as hostname).
2. Even better update the host file to remove duplicate localhost entries

For this issue the correct resolution is:

1. Change the www.myapp.local binding from 127.0.0.1 to ::1 If in the host file localhost is configured to be resolved to ::1.
2. Or an even better approach is to use --host=www.myapp.local this ensures that the correct IP address is resolved. This is because the CLI will spawn the devserver with localhost when host is not provided. Correctly so, this is is not guaranteed to resolve to 127.0.0.1 if IPv6 capable hosts are added in the host file.

[Franiac]

Thx for the info!

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