title: How to Load Environment Data for app.modules.ts in Angular
body: <p>I need to load data from a service which contains environment data.  I need some of that data for a module in <code>app.modules</code>.</p>
  
  <p>Here's a small <code>app.modules.ts</code> example:</p>
  
  <pre><code>import { CustomEnvironmentService } from './CustomEnvironmentService';
  
  let customService: CustomEnvironmentService;
  
  @NgModule({
      declarations: [...],
      imports: [CustomModule.forRoot(customService.ENVIRONMENT_DATA)],
      providers: [...]
  })
  export class AppModule {}
  </code></pre>
  
  <p>First thing to notice is that <code>customService.ENVIRONMENT_DATA</code> is just a public variable in <code>CustomEnvironmentService</code> which gets information from an environment config file called <code>env.js</code>.</p>
  
  <p>The problem is that when the app loads <code>customService.ENVIRONMENT_DATA</code> is undefined.  This is understandable as I'm pretty sure the service isn't initialized and hasn't fetched the data.</p>
  
  <p>I found something called <code>APP_INITIALIZER</code> but it appears that I may not be able to use it to read from either that <code>env.js</code> file or will it use my <code>CustomEnvironmentService</code> (which gets the data from <code>env.js</code>).</p>
  
  <p>I'm also basing my implementation on this article: <a href="https://www.jvandemo.com/how-to-use-environment-variables-to-configure-your-angular-application-without-a-rebuild/" rel="noreferrer">How to use environment variables to configure your Angular application without a rebuild</a></p>
  
  <p>Any ideas?</p>