How to run my Angular site on mobile device that is running localhost on my windows desktop [duplicate]

Solution 1:

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

ng serve --host 0.0.0.0
Find your local IP address by following this
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.

Solution 2:

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.
Next, type ng serve --host 192.168.0.10.
Ok, your app on air for all devices on same network.
Now only http://192.168.0.10:4200/ will work, localhost not more.

Solution 3:

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

Solution 4:

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:

Settings
Wifi
Long Click your desired Network
Modify Network
Click advanced/extended Options
Set proxyHostname: localhost and proxyPort: 4200 and bypassProxyFor: hostIpAddress

Solution 5:

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.