Repository navigation
[BUG] - Node 18 - ng serve - something has changed in Node v18 #24442
Description
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=myapphost 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?
Activity
kevindqc commentedon Jan 6, 2023
Had a similar issue, and had to use
--host 0.0.0.0to fix itnawlbergs commentedon Jan 10, 2023
did you have any issues with
hmr(hot module reloading) after setting to 0.0.0.0?kevindqc commentedon Jan 12, 2023
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 commentedon Jan 21, 2023
@alan-agius4 I see you transferred this issue.. not sure how to see where it was transferred to...
breaks in 18
this does work
So... I guess this issue can be closed... tho it would be nice to know what changed to break it.
alan-agius4 commentedon Jan 23, 2023
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 commentedon Jan 24, 2023
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 newis 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 commentedon Jan 24, 2023
@Franiac, from what you are describing you are experiencing a different problem.
Franiac commentedon Jan 24, 2023
@alan-agius4 true, created and referenced the new issue 😄
alan-agius4 commentedon Jan 25, 2023
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 commentedon Jan 25, 2023
@alan-agius4 What does that mean for the default projects of Angular/CLI?
--host=127.0.0.1is a valid workaround then. But how do you plan to adjust for the Node 18 changes?alan-agius4 commentedon Jan 25, 2023
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
localhostis resolved to127.0.0.1there are two workarounds until the issue is fixes on their end.--host=127.0.0.1(This will cause breakages if you are using proxies that rely on thelocalhostas hostname).localhostentriesFor this issue the correct resolution is:
www.myapp.localbinding from127.0.0.1to::1If in the host filelocalhostis configured to be resolved to::1.--host=www.myapp.localthis ensures that the correct IP address is resolved. This is because the CLI will spawn the devserver withlocalhostwhen host is not provided. Correctly so, this is is not guaranteed to resolve to127.0.0.1if IPv6 capable hosts are added in the host file.Franiac commentedon Jan 25, 2023
Thx for the info!
angular-automatic-lock-bot commentedon Feb 25, 2023
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.