title: how to Configure connection to backend dynamically in environment.prod.ts of Angular app?
body: <p>Building an app which has the frontend developed in Angularjs and backend in Java(maven).</p>
  
  <p>Below is the environment.prod.ts file for Angular communicate with backend.</p>
  
  <pre><code>export const environment = {
    production: true,
    urlAddress: 'http://localhost:8085'
  };
  </code></pre>
  
  <p>So far deployed the app locally, I start both frontend and backend as below and the app worked fine in local machine - localhost:4200</p>
  
  <pre><code>frontend 
  ng server --host 0.0.0.0
  
  backend
  java -jar backend.jar
  </code></pre>
  
  <p>The problem occured when I tried to access the app from a different system in the same network. I can able to access the front end using the system deployed IP address like below instead of localhost:4200.</p>
  
  <pre><code>192.168.43.214:4200
  </code></pre>
  
  <p>But the connection to backend not working, when I did the browser inspect, found out it tries to access the localhost:8085 as backend because of the IP address localhost:8085 hardcoded in environment.prod.ts file.</p>
  
  <p>When I tried to access the java backend service alone using system IP address, jhipster page coming and its working fine too.</p>
  
  <pre><code>192.168.43.214:8085
  </code></pre>
  
  <p>Configured prod file as below fixed the issue</p>
  
  <pre><code>export const environment = {
    production: true,
    urlAddress: 'http://192.168.43.214:8085'
  };
  </code></pre>
  
  <p>But I have to know beforehand the IP address of the system where backend service going to run.</p>
  
  <p>Since both frontend and backend going to run in the same server. How to make the angular to use its own IP address for backend connection.</p>
  
  <p>Thanks,</p>
  
  <p>Mohan</p>