How do I use a mobile phone to open localhost:4200

问题:

My phone and pc are in same wifi. When I run ng serve, I open localhost:4200 in Chrome with my PC, which works.

But I open 192.168.1.107:4200 with my mobile phone, and it doesn’t work.

When I use create-react-app. It works.

Green is angular. White is react

回答1:

In order to make your server available in local network, you need to use the following command:

ng serve --host 192.168.1.107

And then the app will be available on 192.168.1.107:4200 on every device in your network.

If you don't know what is your LAN address you can execute ifconfig | grep broadcast on unix-based OS - the first IP is your computer, or ipconfig on Windows machine.

回答2:

• Phone OS - Android v.9
• Desktop OS - Windows 10
• Web browser (on both phone and desktop) - Google Chrome

---

1. Setup your mobile phone through this tutorial -> Chrome Remote debugging
2. Run your angular app by this comand ng serve --public-host (app should run on localhost:4200)
3. Ensure that your desktop and phone are connected to the same network

4. You need to do port forwarding, which is thanks to Chrome DevTools realy easy!

   • Tutorial -> Chrome Access Local Servers
   • You need only to forward one port, you do it by clicking Add rule button which is located in Remote devices tab in the settings (see Tutorial), then into Device port you write 4200 and into Local address you enter localhost:4200
   • In my scenario I also needed to forward other port, because I was running my backend server on localhost too, my backend is running on localhost:5010, so I simply add new rule like i said above Device Port: 5010 and Local address: localhost:5010

5. You can now visit localhost:4200 on your phone and it should show your app

   • The best part is that you can open the DevTools for the tab you have opened in your phone from the desktop DevTools and easily debug your page on phone from the Desktop (inspect the elements, see console, etc...) Your page will also be reloaded after change is made in the code...

回答3:

Your picture indicates that your PC's IP address is 192.168.1.107. You stated that you're trying to access your angular app on the following IP:port combination:

192.108.1.107:4200

Assuming this isn't a typo, using the following IP:port combination 192.168.1.107:4200 should allow you to access your angular app.

回答4:

Please Refer this

If both your desktop and phone are connected to the same WiFi (or any other local network), then use your desktop IP address assigned by the router (not localhost and not 127.0.0.1).

To find out the IP address of your desktop:

• type into the command line ipconfig (Windows) or ifconfig (Unix)
• there's going to be a bunch of IP's
• try all of them (except the forementioned localhost and 127.0.0.1)

回答5:

If your phone and your computer connected to the same network (Wifi, LAN), you can use your computer local IP address (not the public IP address) to connect from your mobile to your computer.

Note: you should allow this in your computer firewall by adding inbound role to allow accessing your computer through your mobile.

回答6:

Linux machine + Android phone on the same wifi network:

1. Get your machine IP

ifconfig -a

.
.
wlp3s0: flags=4163<UP,BROADCAST,RUNNING,MULTICAST>  mtu 1500
      inet 192.168.1.199  netmask 255.255.255.0  broadcast 192.168.1.255

My machine results: network interface wlp3s0, IP 192.168.1.199

2. Get your phone IP

consult your phone, 
normally in Settings > About device > Status

Result: my phone IP is 192.168.1.196

3. Open port 4200 on interface wlp3s0 on your dev machine, your phone IP only, as root:

ufw allow in on wlp3s0 from 192.168.1.196 to any port 4200

read ufw man page!!! - doing the wrong thing can open your machine to attacks

ufw status

 Status: active

 To                         Action      From
 --                         ------      ---- 
 4200 on wlp3s0             ALLOW       192.168.1.196

4. Serve your app to 192.168.1.199

ng serve --host 192.168.1.199

5. Connect from your desktop as well as from your phone to

192.168.1.199:4200

6. Alternative - serve to 0.0.0.0

ng serve --host 0.0.0.0

from your machine: localhost:4200
from your phone: [phone]:4200

You may or may not need --disable-host-check

7. Reset your firewall when done

ufw reset
ufw enable
ufw status

回答7:

I'm not sure whether this command changed in Angular 8, but none of these worked for me.

All I had to do was manually specify the port, et voilà!

ng s --host 0.0.0.0 --port 4200

(Note that you can also use your actual IP address in place of 0.0.0.0; both worked for me.)