Our Angular 12 app has a module that imports a dependency we want to configure based on a **configuration file** that's **only available in runtime**, not in compile-time.

The package in question is [ng-intercom](https://www.npmjs.com/package/ng-intercom), although I imagine the same issue could come up later with other packages as well.

The motivation behind the dynamic configuration is that our app runs in 4 different environments and we don't want to create separate builds for each, since the only difference between them is the configuration file which contains the backend's URL and a few Application IDs (like Intercom, Facebook app ID, etc.)

This is how the **import** in question is made currently:

```
imports: [
  ...
  IntercomModule.forRoot({
    appId: env.intercomID,
    updateOnRouterChange: true,
  }),
  ...

```

The issue is that **appID should be configurable, the env variable should be loaded dynamically**. Currently, it's a JSON imported and compile into the code, but that means we can't change it for our different environments without rebuilding the code for each:

```
import env from '../../assets/environment.json';

```

We have an **APP\_INITIALIZER**, however, that doesn't stop modules from being imported before it's resolved:

```
{
  provide: APP_INITIALIZER,
  useFactory: AppService.load,
  deps: [AppService],
  multi: true,
},

```

... and the relevant configuration loader:

```
static load(): Promise<void> {
  return import('../../assets/environment.json').then((configuration) => {
    AppService.configSettings = configuration;
  });
}

```

We can use this configuration without issues with our components and services.

We managed to achieve the results we want in [angularx-social-login](https://www.npmjs.com/package/angularx-social-login)'s configuration:

```
providers: [
  ...
  {
    provide: 'SocialAuthServiceConfig',
    useValue: new Promise(async resolve => {
      const config = await AppService.config();
      resolve({
        autoLogin: true,
        providers: [
          {
            id: FacebookLoginProvider.PROVIDER_ID,
            provider: new FacebookLoginProvider(config.facebookApi),
          }
        ]
    } as SocialAuthServiceConfig);
  ...
]

```

SocialAuthServiceConfig is a provider however, we couldn't find a way to configure ng-intercom's import similarly.

Can we achieve this somehow? **Is there a way to dynamically configure module imports?**