title: How to load a remote config file for a lazy loaded module in Angular
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>Then components in this module could inject this same ConfigService, getting access to whatever config points were retrieved.</p>