title: Angular load external configuration before AppModule loads
body: <p>Consider the following scenario (Angular v7):</p>
  
  <ol>
  <li>Load configuration parameters (API server URL and Auth server URL) from an external endpoint (JSON), <strong>before</strong> the AppModule is loaded</li>
  <li>Pass configuration to AppModule (OAuth2 module)</li>
  <li>Compile the app with AOT</li>
  </ol>
  
  <p>Point 2 is key here, and looks like this:</p>
  
  <pre><code>@NgModule({
    imports: [
      ...
      OAuthModule.forRoot({
        resourceServer: {
          allowedUrls: [API_SERVER_URL], // &lt;== we need to set the value that we loaded from the external endpoint (JSON) here
          sendAccessToken: true
        }
      }),
      ...
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>What I've tried to far:</p>
  
  <ul>
  <li>A solution with <a href="https://hackernoon.com/hook-into-angular-initialization-process-add41a6b7e?gi=4ee3389eaa27" rel="noreferrer">APP_INITIALIZER</a>. This doesn't work, as the <code>OAuthModule.forRoot()</code> is triggered before the <code>APP_INITIALIZER</code> can download the external configuration JSON.</li>
  <li>Load the config <a href="https://stackoverflow.com/a/52111073/4337765">with an async function</a> in the <code>main.ts</code> into the Angular environment variables, then bootstrap the AppModule. Also doesn't work due to the <code>import { AppModule } from './app/app.module';</code> statement in <code>main.ts</code>, which causes the AppModule to load and fire <code>OAuthModule.forRoot()</code> before the external config is loaded (<a href="https://stackoverflow.com/a/52561650/4337765">this comment</a> confirms this behavior).</li>
  <li><a href="https://stackoverflow.com/a/52561650/4337765">Load the AppModule dynamically</a> in <code>main.ts</code>, so without the <code>import</code> statement on top. <a href="https://stackblitz.com/edit/angular6-intercom-issue-shhf69?file=src%2Fmain.ts" rel="noreferrer">This</a> is the StackBlitz example given in that comment. <strong>It works</strong>, but 1) breaks lazy loading <code>WARNING in Lazy routes discovery is not enabled.</code> and 2) doesn't work with AOT compiling. It <strong>does</strong> come very close to what I need.</li>
  </ul>
  
  <p>Curious to hear if someone is aware of another method to get external configuration loaded <strong>before</strong> the AppModule loads.</p>
  
  <p>StackBlitz for option 3 (Load the AppModule dynamically): <a href="https://stackblitz.com/edit/angular-n8hdty" rel="noreferrer">https://stackblitz.com/edit/angular-n8hdty</a></p>