72

I know from this question and answer on Super User Site running on localhost on desktop is unreachable on android device (PS: this question continues on the question in the link) that the command ng serve opens a bad configured webserver.

The question is how could I run my site on an Android device without deploying my site. I'll try to run the site on this url http://192.168.0.168:4200 using Angular-CLI.

H. Pauwelyn
  • 13,575
  • 26
  • 81
  • 144

6 Answers6

188

try ng serve --host option as explained in this issue: https://github.com/angular/angular-cli/issues/1793 comment by intellix.

  1. ng serve --host 0.0.0.0
  2. Find your local IP address by following this
  3. Navigate to <local IP adress>:4200 from any device on the same network.

NOTE: If you get CONNECTION_REFUSED just disable your firewall and you should be good to go.

otherwise, try https://ngrok.com/ to open a tunnel from your local network to your computer's localhost. Basically your computer forwards the 4200 port to an external IP and port that any device on the network can access.

mighty_mike
  • 714
  • 7
  • 19
Ahmed Musallam
  • 9,523
  • 4
  • 27
  • 47
  • Seems this work instead `ng serve --host=0.0.0.0` – Pardeep Jain Jan 04 '19 at 05:35
  • 5
    If the url still isn't available on you mobile device, try to disable a firewall – Valeriy Katkov Mar 07 '19 at 06:55
  • Hey this is very cool. But I get this weird behavior that doesn't seem to catch any API responses, is this normal? – RNMR Jan 27 '21 at 15:19
  • Thank you. It partially worked. But I think it only allows the angular app. through the angular app Backend is not readable. My phone only shows the things which is not connected with the backend. Do I need to up the server with another method? I used "nodemon app.js --host 0.0.0.0". But it didn't solve my problem. – Jonny Mar 21 '21 at 09:00
  • @johnny, your backend would be served from a separate server, which you need to make accessible to the network. I don't know what you use for that ow how you run it. But hopefully it has documentation on how you can do the same thing as angular cli's built-in server. – Ahmed Musallam Mar 24 '21 at 17:31
  • `--host 0.0.0.0` was the key for me – Akshay Rajpaul Aug 19 '21 at 14:58
45

  1. First verify your machine IP Address.

    • On Windows, type ipconfig in Prompt (copy IPv4).
    • On Mac, type ifconfig |grep inet in Terminal (copy inet).


    In my case this is 192.168.0.10.

  2. Next, type ng serve --host 192.168.0.10.

  3. Ok, your app on air for all devices on same network.

  4. Now only http://192.168.0.10:4200/ will work, localhost not more.

H. Pauwelyn
  • 13,575
  • 26
  • 81
  • 144
Shabbir Dhangot
  • 8,954
  • 10
  • 58
  • 80
  • how to make mobile nd laptop be on same network?? – user2900572 May 08 '20 at 09:37
  • i hav connected mobile laptop to same modem thr WIFI but its not loading n mobile – user2900572 May 08 '20 at 09:38
  • Using `ipconfig`, I got my real IPv4, when I used online sites to get my IP Address, I've faced this error `An unhandled exception occurred: listen EADDRNOTAVAIL: address not available xxx.xxx.xx.xx:4200. See "C:\Users\xx" for further details.` – Elharony May 25 '21 at 08:08
  • 1
    @user2900572, connect both devices to the same wifi router. Or turn hotspot on your mobile and connect your laptop to it. – Deepak Nov 15 '21 at 14:52
9

When i tried using

ng serve --host local_ip_address

I was facing

Invalid header Request

This issue was solved using --disable-host-check

ng serve --host local_ip_address --disable-host-check

Schalton
  • 2,867
  • 2
  • 32
  • 44
Ram Sharma
  • 91
  • 1
  • 2
1

As an addition to all the answers above, you might need to adjust your proxy settings on your device. For my Android Phone, this was:

  1. Settings
  2. Wifi
  3. Long Click your desired Network
  4. Modify Network
  5. Click advanced/extended Options
  6. Set proxyHostname: localhost and proxyPort: 4200 and bypassProxyFor: hostIpAddress
bensen
  • 23
  • 4
1

I open my Angular2 App on Mobile device using Chrome Remote Device.

You just have to connect your phone to your pc and sync it with chrome. Than do the port forwarding as described at the link above.

After connect your device, run your Angular app serve with ng serve --public-host

Now you can access your app in localhost:4200 from mobile device.

Kaloyan Stamatov
  • 3,894
  • 1
  • 20
  • 30
0

for Ubuntu people: get the ip address writing this in the terminal: hostname -I

you will get an ip address something like 192.168.0.0

and then you can just serve the app with: ng serve --host ip_address

and then you can just open the browser in your mobile with: http://ip_address:4200

Schalton
  • 2,867
  • 2
  • 32
  • 44
Ahmed Alhisaie
  • 1