title: How to load config.json and use the configuration values in another module?
body: <p>I'm trying to move all configuration values from <strong>environment.ts</strong> to <strong>config.json</strong>, so I can use the same build for multiple different environments (development, staging and production). </p>
  
  <p>I have been following the suggestion written in here, <a href="https://stackoverflow.com/questions/49770967/vsts-build-replace-angular4-environment-variables-in-release-stage">VSTS build - replace Angular4 environment variables in Release stage</a> but in my case, I'm using some of the configuration values in another module, namely <strong>core.module</strong> which I'm setting up Azure MSAL details like Client Id, redirect Uri, etc.</p>
  
  <p>I'm hitting an error saying that the configuration values that I need for setting up Azure MSAL are not yet loaded up. </p>
  
  <p><strong>config.service.ts</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  
  import { Config } from 'src/app/model/config';
  
  export let CONFIG: Config;
  
  @Injectable()
  export class ConfigService {
  
    constructor(private http: HttpClient) { }
  
    public load() {
      return new Promise((resolve, reject) =&gt; {
        this.http.get('/assets/config/config.json')
          .subscribe((envResponse: any) =&gt; {
            const t = new Config();
            CONFIG  = Object.assign(t, envResponse);
            resolve(true);
          });
  
      });
    }
  }
  
  export function configFactoryService(configService: ConfigService): Function {
    return () =&gt; configService.load();
  }
  </code></pre>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import { BrowserModule } from '@angular/platform-browser';
  import { LOCALE_ID, NgModule, APP_INITIALIZER } from '@angular/core';
  
  // Load the required calendar data for the de locale
  import '@progress/kendo-angular-intl/locales/en-DK/all';
  
  import { AppComponent } from './app.component';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { routingModule } from './app.routing';
  import { CoreModule } from './core/core.module';
  import { SharedModule } from './shared/shared.module';
  import { HomeModule } from './modules/home/home.module';
  import { ConfigService, configFactoryService } from './core/services/config.service';
  import { HttpClient, HttpClientModule } from '@angular/common/http';
  
  @NgModule({
    declarations: [
      AppComponent,
    ],
    imports: [
      BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
      BrowserAnimationsModule,
      HomeModule,
      SharedModule,
      CoreModule,
      routingModule,
      HttpClientModule
    ],
    providers: [
      ConfigService,
      {
        provide: APP_INITIALIZER,
        useFactory: configFactoryService,
        deps: [
          ConfigService,
          HttpClient
        ],
        multi: true
      },
      { provide: LOCALE_ID, useValue: 'en-DK' }
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p><strong>core.module.ts</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import { NgModule } from '@angular/core';
  import { NavigationComponent } from './components/navigation/navigation.component';
  import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
  import { RouterModule } from '@angular/router';
  import { HttpModule } from '@angular/http';
  import { AuthMSALCustomInterceptor } from './interceptors/auth.msal.custom.interceptor';
  import { MsalModule } from '@azure/msal-angular';
  import { CONFIG as environment } from './services/config.service';
  import { CommonModule } from '@angular/common';
  
  @NgModule({
    imports: [
      CommonModule,
      HttpClientModule,
      FormsModule,
      ReactiveFormsModule,
      RouterModule,
      HttpModule,
      MsalModule.forRoot({
        clientID: environment.clientID,
        authority: environment.authority,
        validateAuthority: true,
        redirectUri: environment.redirectUri,
        popUp: false,
        consentScopes: [
          `api://${environment.sApplicationId}/access_as_user`,
          `api://${environment.wApplicationId}/access_as_user`,
          `api://${environment.oApplicationId}/access_as_user`,
        ],
        protectedResourceMap: [
          [
            environment.sUrl,
            [`api://${environment.sApplicationId}/access_as_user`]
          ],
          [
            environment.wUrl,
            [`api://${environment.wApplicationId}/access_as_user`]
          ],
          [
            environment.oUrl,
            [`api://${environment.oApplicationId}/access_as_user`]
          ]
        ]
      })
    ],
    exports: [
      HttpClientModule,
      FormsModule,
      ReactiveFormsModule,
      HttpModule,
      NavigationComponent
    ],
    declarations: [NavigationComponent],
    providers: [
      {
        provide: HTTP_INTERCEPTORS,
        useClass: AuthMSALCustomInterceptor,
        multi: true
      }
    ],
  })
  export class CoreModule { }
  </code></pre>
  
  <p>I need to be able to load the configuration values and use them in <strong>core.module</strong>. Is there a way to load config.json values even before the modules are initialized? </p>
  
  <p>EDIT: A screenshot to show where the error occurs - <a href="https://i.stack.imgur.com/7VCZf.png" rel="noreferrer">core.module error</a></p>