title: Configure base URL depending on environment
body: <p>Suppose we have Angular 4+ app that needs to be located in different relative root URLs on different environments, i.e.:</p>
  
  <ul>
  <li><code>http://localhost:4200/index.html</code> for development</li>
  <li><code>http://prod.server.com/angular-app/index.html</code> for production</li>
  </ul>
  
  <p>Most likely, we'd want to have that option in our <code>environment.x.ts</code> files:</p>
  
  <pre><code>export const environment = {
      production: false,
      appRoot: "/"
  };
  
  export const environment = {
      production: true,
      appRoot: "/angular-app/"
  };
  </code></pre>
  
  <p>How can we configure Angular build/runtime infrastructure to automatically adjust the app depending on this option in <code>environment.x.ts</code> files?</p>
  
  <p><strong>UPDATE:</strong>
  Since I'm using the Angular CLI toolchain indirectly via Visual Studio build/publish system (<a href="https://marketplace.visualstudio.com/items?itemName=AndreyFomin.AngularCLIProjectTemplate" rel="noreferrer">template</a>), it'd be nice to have a solution based completely on Angular CLI + <code>*.json</code>/<code>*.ts</code>/<code>*.js</code> files. This way it would be suitable for any build system where Angular CLI could be used.</p>