title: Angular - read configuration from server variables at run time when hosted on Azure
body: <p>We have an Angular app which is hosted using Asp.Net Core on Azure. The app requires several URIs that are dependent on the environment (deployment slot) in which it is running.</p>
  
  <p>Azure provides a great mechanism for injecting environment variables for server side code where settings can be specified per deployment slot. We need to be able to configure the Angular app at run time using this configuration specified in Azure.</p>
  
  <p>What is the best mechanism to forward Azure application configuration on to the Angular client app so they are detected when the Angular app bootstraps?</p>
  
  <p>A quick and dirty approach is to specify the environment name variable in Azure then set some global variables in Index.htm using the Asp.Net Core Environment Tag helpers:</p>
  
  <pre><code>&lt;environment names="azure-development"&gt; 
      &lt;script type="text/javascript"&gt;
          (function (window) {
              window.__env = window.__env || {};
              window.__env.environmentName = 'azure-development';
              window.__env.apiUri = 'DevApiUriAddress';
          }(this));
      &lt;/script&gt;
  &lt;/environment&gt;
  &lt;environment names="azure-test"&gt; 
      &lt;script type="text/javascript"&gt;
          (function (window) {
              window.__env = window.__env || {};
              window.__env.environmentName = 'azure-test';
              window.__env.apiUri = 'TestApiUriAddress';
          }(this));
      &lt;/script&gt;
  &lt;/environment&gt;
  </code></pre>
  
  <p>...and register some kind of injectable class Angular provider to access these:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  
  function _window(): any {
      // return the global native browser window object
      return window;
  }
  
  @Injectable()
  export class EnvConfig{
  
      get environmentName(): string {
  
          return _window().__env.environmentName;
      }
  }
  </code></pre>
  
  <p>However this feels like a big hack.</p>
  
  <p>What better alternatives are there?</p>