Angular-cli: ng serve doesn't listen other than localhost

[gyuho]

1. OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)

Ubuntu 16.04

1. Versions. Please run ng --version. If there's nothing outputted, please run
   in a Terminal: node --version and paste the result here:

node --version
v6.6.0

1. Repro steps. Was this an app that wasn't created using the CLI? What change did you
   do on your code? etc.

I have this app https://github.com/jelbourn/material2-app.

And just type npm start in repository root. Both in remote and local machine, I see

> [email protected] start /home/gyuho/material2-app
> ng serve

Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://ember-cli.com/user-guide/#watchman for more info.
** NG Live Development Server is running on http://localhost:4200. **
8221ms building modules                                                                  
23ms sealing
0ms optimizing 
1ms basic module optimization 
97ms module optimization
0ms advanced module optimization 
11ms basic chunk optimization       
0ms chunk optimization 
2ms advanced chunk optimization 
0ms module and chunk tree optimization 
150ms module reviving
2ms module order optimization 
5ms module id optimization 
3ms chunk reviving 
0ms chunk order optimization 
13ms chunk id optimization
83ms hashing
1ms module assets processing 
188ms chunk assets processing
5ms additional chunk assets processing 
0ms recording 
0ms additional asset processing 
2415ms chunk asset optimization
1616ms asset optimization
37ms emitting
Hash: 93c935dc7d6ef86a5d1e
Version: webpack 2.1.0-beta.22
Time: 12902ms
           Asset       Size  Chunks             Chunk Names
  main.bundle.js    3.43 MB    0, 2  [emitted]  main
styles.bundle.js    43.4 kB    1, 2  [emitted]  styles
       inline.js    5.53 kB       2  [emitted]  inline
        main.map     3.5 MB    0, 2  [emitted]  main
      styles.map    53.8 kB    1, 2  [emitted]  styles
      inline.map    5.59 kB       2  [emitted]  inline
      index.html  580 bytes          [emitted]  
Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks       Chunk Names
    index.html  2.92 kB       0       
webpack: bundle is now VALID.

But when I try to connect to http://[PUBLIC_IP_ADDRESS_OF_CLOUD]:4200, it doesn't serve. I checked all network settings (I am using Google Cloud VM) and confirm that there's no firewall blocking :4200.

Same simple webserver in Go listening to :4200 works fine on the same machine.

Is there anything that I am missing to deploy angular app in virtual machines?

[gyuho]

This also doesn't serve via remote machines.

$ ng --version
Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://ember-cli.com/user-guide/#watchman for more info.
angular-cli: 1.0.0-beta.15
node: 6.6.0
os: linux x64


npm install -g angular-cli
ng new sample-app
cd sample-app
ng serve
#open http://[IP]:4200

[gyuho]

I found the cause. It's binding static IP 127.0.0.1, not 0.0.0.0.

I am not sure what npm package does this... :(

$ sudo netstat -ntlp
Active Internet connections (only servers)
Proto Recv-Q Send-Q Local Address           Foreign Address         State       PID/Program name
tcp        0      0 127.0.0.1:4200          0.0.0.0:*               LISTEN      27260/angular-cli
tcp        0      0 0.0.0.0:22              0.0.0.0:*               LISTEN      1799/sshd       
tcp6       0      0 :::22                   :::*                    LISTEN      1799/sshd       

It should be something like

$ sudo netstat -ntlp
Active Internet connections (only servers)
Proto Recv-Q Send-Q Local Address           Foreign Address         State       PID/Program name
tcp        0      0 0.0.0.0:22              0.0.0.0:*               LISTEN      1799/sshd       
tcp6       0      0 :::4200                 :::*                    LISTEN      27613/a         
tcp6       0      0 :::22                   :::*                    LISTEN      1799/sshd  

$ sudo netstat -ntlp
Active Internet connections (only servers)
Proto Recv-Q Send-Q Local Address           Foreign Address         State       PID/Program name
tcp        0      0 10.0.3.1:53             0.0.0.0:*               LISTEN      1033/dnsmasq    
tcp        0      0 0.0.0.0:22              0.0.0.0:*               LISTEN      1105/sshd       
tcp6       0      0 :::8000                 :::*                    LISTEN      6833/etcd-play  
tcp6       0      0 fe80::208e:5eff:fe6b:53 :::*                    LISTEN      1033/dnsmasq    
tcp6       0      0 :::22                   :::*                    LISTEN      1105/sshd   

[gyuho]

Works with command ng serve --host 0.0.0.0

[estradamarkie]

@gyuho Hi have you found the cause which package or making the app bind to 127.0.0.1 and not other IPs? I have to run --host 0.0.0.0 as well to make it work on VM.

[gyuho]

@estradamarkie I have no idea :0

[estradamarkie]

https://github.com/angular/angular-cli/issues/3101 I posted a similar issue this might help clear things up :)

[StabakSen]

ng serve --host 0.0.0.0 worked. Thanks

[CokeSpirit]

Thanks, this drove me crazy.

[nyannko]

Thanks, it is helpful to write Dockerfile and deploy to server.

[ZiedChekir]

Thanks It worked :D ng serve --host 0.0.0.0

[azarus]

Whats the reason behind 127.0.0.1 this is just unnecessary most people probably want to test their apps on mobile too. And accessing the dev environment over lan is the easiest way to do so. Can we make the 0.0.0.0 to be the default please? @gyuho

[sshreya0808]

Invalid Host header. still not solved by ng serve --host 0.0.0.0

[levivel]

@sshreya0808 I may have had the same "Invalid Host Header" problem as you did. The cause of this problem may or may not have been because AWS remote server/VPS has some default firewalls/security settings that may happen to obstruct simply testing Angular's CLI-installed "Welcome to app!" page.
To fix this on my AWS instance, without enabling production, I simply ran:
ng serve --port 8080 --host 0.0.0.0 --disableHostCheck true , then navigated from Safari/Chrome to the IP address I associated with my instance in the "Elastic IPs" section of my AWS dashboard -- plus the port I specified (e.g. "142.43.53.12:8080/").

[ghost]

@levivel
yeah, ng serve --port 8080 --host 0.0.0.0 --disableHostCheck true it works for me.
thanks 👍

[dstran]

None of these helped. My browser tab continues to spin with no errors in the dev tool Network tab in Chrome. I disabled private and domain firewalls. I'm out of ideas. Anyone can help me troubleshoot this? Greatly appreciated!

Windows 10 Creators Update
Vagrant: v2.0.0
VirtualBox: v5.1.30
Angular: ~4.0.0
Angular CLI: ~1.0.0

[vagrant@localhost ~]$ sudo netstat -ntlp
Active Internet connections (only servers)
Proto Recv-Q Send-Q Local Address           Foreign Address         State       PID/Program name
tcp        0      0 0.0.0.0:4200            0.0.0.0:*               LISTEN      3412/@angular/cli
tcp        0      0 0.0.0.0:22              0.0.0.0:*               LISTEN      1218/sshd
tcp        0      0 127.0.0.1:25            0.0.0.0:*               LISTEN      1696/master
tcp6       0      0 :::22                   :::*                    LISTEN      1218/sshd
tcp6       0      0 ::1:25                  :::*                    LISTEN      1696/master

[rohit2219]

Thanks for this , this option worked for me in my ubuntu remote: ng serve --host 0.0.0.0

[vusan]

Also worked for me by ading serve on .angular-cli.json.
Port here 4201. Solution found from #2542.
"defaults": {
"styleExt": "css",
"component": {},
"serve": { "host": "0.0.0.0", "port": 4201 }
}

[lgoyal06]

thanks it worked for me as well

[bb1]

@ninjadev1030 solution with --host 0.0.0.0 --disableHostCheck true works even in Angular 6! Thanks for this.

[ludwigliu]

Thanks, it works now, as it drives me crazy for several days.

[vanishtachangea]

@ludwigliu , @lgoyal06 , @rohit2219 , Can anyone of you please explain how you fix it? I try modification in the .angular-cli.json: "serve": {
"host": "0.0.0.0", "port": 4201
}
and running
ng serve --host 0.0.0.0
The angular app is not loading.
I have another api url which is loading though. It is weird. Please help me.

[hamed6]

@levivel You solved my problem thanks, how can I fix it permanently without changing host/port. Im using different cloud service, but I assume it can apply to my service.
one more question, what you mean you "without enabling production"?

[angular-automatic-lock-bot[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._}