CODEWITHSUNDEEP
angularlocalhost
user7712405
user7712405

Reputation:

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

Green is angular.White is react

Upvotes: 23

Views: 29962

Answers (12)

Ahmed_mag
Ahmed_mag

Reputation: 260

If you want to access the the page in ssl (https) use the following comand (may be as administrator):

ng serve --ssl --host 0.0.0.0

Upvotes: 0

BIBIN S
BIBIN S

Reputation: 11

  1. Allow Inbound rule for 4200 in your PC/Laptop

Open your windows defender firewall on your windows system and crate a new inbound rule with TCP port 4200, then select your connection type and set rule name and description.

  1. Get your local machine's IP

Just open your command prompt in your local machine, and run the following command

ipconfig
  1. Make sure your local machine and your mobile connected

You can view localhost:4200 on your mobile, only if both devices are connected within the same network. So make sure your connection.

  1. Start your Angular application

Start your angular application with the following command

ng s --host <YOUR_IP>
  1. Open your web app

Now you can open your web app at "http://<YOUR_IP:4200>" on both local system and your mobile.

for detailed reference check this shorts video: How to open localhost:4200 in mobile

Upvotes: 0

Roman Šim&#237;k
Roman Šim&#237;k

Reputation: 900

  • 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
  1. 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...

Upvotes: 12

Christopher Martin
Christopher Martin

Reputation: 11

• Open in mobile

  • ng serve --host=0.0.0.0 --disable-host-check
  • ng serve --host ip

• Solution option (view backend data on mobile)

  • Services section (Angular)
  • Change domain name (localhost) to (ipHost)

Example

URI= " http://localhost:8080/... " [NO]

URI= " http://192.168.0.5:8080/... " [YES]

Upvotes: 1

Rida
Rida

Reputation: 89

Normally this would work like charm.

ng serve --host 0.0.0.0 --port <some-port>

If it doesn't it could be the Antivirus, in my case I turned off Avast and it worked!

Upvotes: 0

H. Pauwelyn
H. Pauwelyn

Reputation: 14300

You could also use ngrok to create a tunnel to have public URL. Install this program, open it with the command line by using next command:

ngrok http 3000

Upvotes: 0

Sensei James
Sensei James

Reputation: 2695

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.)

Upvotes: 8

Jiri
Jiri

Reputation: 61

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

  1. Get your phone IP 
consult your phone, 
normally in Settings > About device > Status

Result: my phone IP is 192.168.1.196
  1. 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
  1. Serve your app to 192.168.1.199

ng serve --host 192.168.1.199

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

192.168.1.199:4200

  1. Alternative - serve to 0.0.0.0

ng serve --host 0.0.0.0

from your machine: localhost:4200
from your phone: 192.168.1.199:4200

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

  1. Reset your firewall when done

ufw reset
ufw enable
ufw status

Upvotes: 0

Daniel Kucal
Daniel Kucal

Reputation: 9232

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.

Upvotes: 44

Nour
Nour

Reputation: 5889

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.

Upvotes: 0

Abhijith
Abhijith

Reputation: 37

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)

Upvotes: 0

Jade Cowan
Jade Cowan

Reputation: 2583

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.

Upvotes: 2

Related Questions