How to load a remote config file for a lazy loaded module in Angular

Question

I have an Angular (v6) SPA with a number of lazily loaded modules. At present I have a json file holding config for the app that can be changed via a separate admin interface, without requiring a rebuild/deploy of the app. The config file is currently loaded in the APP_INITIALIZER, which works well to ensure I retrieve the config before allowing the app to fully bootstrap.

I want to split this config file up per module, having one general config loaded in the APP_INITIALIZER and only load the others when that particular module is lazy loaded.

Is there an accepted or best practice way to do this? I can't seem to find anything in the angular docs or in general on the net. One approach may be to fetch the config in the modules constructor, but as far as I can see, there is no way for me to prevent the module continuing to load and setup all its components etc until after this config file is retrieved and stored somewhere.

Could a route resolver serve this purpose perhaps, if I set it on the root route for the lazy loaded module? E.g. Instead of returning any data, I could inject some "ConfigService" into the resolver, which will retrieve the appropriate config file and store it, and then let the resolver resolve.

Then components in this module could inject this same ConfigService, getting access to whatever config points were retrieved.

fjc · Accepted Answer · 2020-04-15 12:15:09Z

2

Fetching the configuration during module initialization (either in the constructor or in a static method such as forRoot) is not going to work, as dependencies have not been resolved at that point. So, for example, you won't have HttpClient available to fetch data.

What could be a viable way:

1. Provide a ConfigurationService that gets the URL of your config file injected

@Injectable()
export class ConfigService {

  private config$ = new BehaviorSubject<any | null>(null);
  private loadedConfig = false;

  constructor(@Inject(CONFIG_URL) private configUrl: string,
              private httpClient: HttpClient) {
    this.getConfig();
  }

  getConfig(): Observable<any> {
    if (!this.loadedConfig) {
      this.loadedConfig = true;
      this.httpClient.get(this.configUrl).subscribe(this.config$);
    }
    return this.config$;
  }

}

2. Provide ConfigurationService as part of a module that can dynamically set CONFIG_URL:

@NgModule({
  providers: [ConfigService],
  imports: [
    HttpClientModule
  ]
})
export class ConfigModule {
  static buildForConfigUrl(configUrl: string): ModuleWithProviders {
    return {
      ngModule: ConfigModule,
      providers: [
        {
          provide: CONFIG_URL,
          useValue: configUrl
        }
      ]
    };
  }
}

3. Import ConfigModule in your feature modules

Now when you have a feature module that is supposed to have its own configuration available, just import ConfigModule using buildForConfigUrl:

@NgModule({
  exports: [
    MyComponent
  ],
  declarations: [
    MyComponent
  ],
  imports: [
    ConfigModule.buildForConfigUrl('https://my-url/my-config.json')
  ]
})
export class FeatureModule {
}

4. Use ConfigService in your components:

@Component({
  selector: 'my-component',
  template: 'I am your new component. My config is: {{ config$ | async | json }}'
})
export class MyComponent implements OnInit{

  config$: Observable<any>;

  constructor(private configService: ConfigService) {
  }

  ngOnInit(): void {
    this.config$ = this.configService.getConfig();
  }

}

With this approach, you nicely decoupled the concerns: Your feature modules don't need to care how the configuration is loaded, but still its components have the configuration available at runtime.

If you want to go one step further, you could even remove the definition of the config URLs from your feature modules and move it to your AppModule centrally.

edited Apr 15, 2020 at 12:15

answered Apr 15, 2020 at 10:45

fjc

5,85521 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

BoomShaka Over a year ago

Thank you, I will give this a try. One question though. The call to configService.getConfig() in MyComponent, is that what then triggers the HTTP request? Wouldn't that mean the request is only made when some component tries to access something, and potentially every time another component wants to access something? I'd rather the request were made once, when the Config Service is instantiated with it's URL.

fjc Over a year ago

I updated my answer accordingly to only load the config per module once, and then cache it in a BehaviorSubject in ConfigService

Collectives™ on Stack Overflow

How to load a remote config file for a lazy loaded module in Angular

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related