How to run an Angular2 app on mobile during development?

Issue

I'm developing an Angular2 app. The app is served using ng s --open, and then the results can be seen at the browser at http://localhost:4200.

I also run a server at the same localhost, at port 3000. To connect to the server, Angular sends requests to https://localhost:3000/some/api.

The problem: when I run the Angular app on a mobile device (connected to the same WiFi), localhost:3000 is not reachable.

How can I run the app on a mobile device browser and still connect to the server at port 3000, while still running the app on http://localhost:4200 on desktop (that connects to localhost:3000) at the same time?

Solution

Use a local network and then serve your angular project on local ip of your system with desired port. For example:- My system's local ip = 192.168.1.15 now ng serve --host 192.168.1.15 --port 2600

After successful compilation, Open 192.168.1.15:2600 in your mobile device (ensure the mobile is connected to the WiFi in the same local network)

Answered By - log10