Open Closed

Angular project on local machine IP address instead of localhost #10594


0
mahendra created

Prerequisites

  • What is your product version?
  • What is your product type (Angular or MVC)?
  • Angular
  • What is product framework type (.net framework or .net core)?
  • .net core

Hi Experts,

We want to run our angular project on local machine IP address instead of localhost.

For Example :

Existing Url : http://localhost:4200/ Expected Url : http://<machine IP address>:<port>

Could you please let us know the step by step changes which we need to do in our server side code (i. e. Visual Studio) and angular project code (i.e Visual Studio Code) both.

Any help would be much appreciated.

Thanks, Best Regards


10 Answer(s)
  • 0
    ismcagdas created
    Support Team

    Hi @mahendra

    Do you mean when run the "npm start" command or do you mean publishing your app locally ?

    Thanks,

  • 0
    mahendra created

    Hi ismcagdas,

    Thanks for your response.

    We want to test (i.e test and fix UI issues while debugging) our web application on multiple devices with the help of browserstack.

    For most of the devices localhost is working fine.

    For iPhone devices, localhost does not work..Therefore they asked us to run our application on local IP address instead of localhost in debugging mode.

    Could you please help us to run our server side and client side project both on private machine IP instead of localhost in debug mode.

    Thanks,

  • 0
    ismcagdas created
    Support Team

    Hi @mahendra

    You can try to run your app using the command below;

    ng serve --host 127.0.0.1 --port 4200
    
  • 0
    mahendra created

    Hi ismcagdas,

    Thanks for your response. If we use the above command, We are getting following error Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

    Please find the below screenshots for your refrence.

    Thanks,

  • 0
    ismcagdas created
    Support Team

    Hi @mahendra

    I think you also need to update the app url in appconfig.json. But, instead of doing that, I suggest you to create a new configuration for your Angular app, see https://angular.io/guide/workspace-config.

    You can basically copy "production" configuration under "configurations" section in angular.json and copy it and change its name. Then, you can also copy "environment.prod.ts" and change its name to something like environment.local-test.ts (don't forget to use this in your new configuration).

    After all, you can start your app using the command below;

    ng serve --host 127.0.0.1 --port 4200 --configuration "your-new-configuratio-name"
    

    In this way, you can run your app on 127.0.0.1 without changing your original configuration

  • 0
    mahendra created

    Hi ismcagdas,

    Thanks for your response.

    We followed the same steps as suggested by you. we are able to run the application on the brower and Android device. However we are getting following error in the browser console while running the application (iPhone) in the browerstack.

    As we need to run our project on local machine IP address. We tried local machine IP instead of 127.0.0.1. This time it is working on browser but we are getting the following error on Android device:

    On iPhone device we are getting the following error:

    Note : Server side application is still running on localhost.

    Do we need to do some changes in our server side code (i. e. Visual Studio) and angular project code (i.e Visual Studio Code).

    Could you please suggest

    Regards,

  • 0
    ismcagdas created
    Support Team

    Hi @mahendra

    Is the 192.x.x.x IP address open to public ? I think it is not and because of that, browserstack can't access your application. You also need to run your server side app with a public IP adress, if you want to use browserstack I guess.

  • 0
    mahendra created

    hi ismcagdas,

    Thanks for your response.

    Could you please help us what step do we need to follow to change the IP address in the server side code (and in angular code if any).

    Regards,

  • 0
    ismcagdas created
    Support Team

    Hi @mahendra

    Actually, you don't have to change it on server side. If the server is accessible from a public IP, then your server app must be accessible as well. You can start the Host app using start-host-mobile.bat file under the Host project (or you can use Mobile running profile if you are using a MAC). In this way, Host app will receive external requests outside of your PC.

  • 0
    mahendra created

    hi ismcagdas,

    192.x.x.x IP address is not open to public. It is local IP address.. Browser stack team asked us to run our application on local IP address instead of localhost.

    Could you please help us to acheive this..

    Thanks,