Angular 2: External configuration befor bootstrap - passing the value to AppModule

Question

I am would like to configure my Angular 2 App from external json file.

In my main.ts I load the config.json

getHttp().get('/config.json')
         .map(response => response.json();)
         .subscribe(
           data => {
             let clientConf: ClientConfig = data;

             // here I want to pass clientConf to AppModule
             platformBrowserDynamic().bootstrapModule(AppModule);

          });

I wonder how to pass clientConf to AppModule to use in app.module.ts:

@NgModule({
     ...
    providers: [
          { provide: Configuration, useValue: clientConf }
           ...

You can use a factory for the module, as mentioned [here](http://stackoverflow.com/a/39454713/2587435). Don't think it works with AoT though. Can't find the issue right now, but there is one floating around somewhere. Maybe [this is it](https://github.com/angular/angular-cli/issues/2887) — Paul Samsotha, Mar 01 '17 at 15:26

score 8 · Accepted Answer · answered Mar 01 '17 at 20:49

8

Here is my solution:

....
.subscribe(
       data => {
         let clientConf: ClientConfig = data;

         // here I want to pass clientConf to AppModule
          platformBrowserDynamic(
                [{ provide: ClientConfig, useValue: clientConf }]
                ).bootstrapModule(AppModule);

      });

I didn't pass clientConf to AppModule, I set ClientConfig as extraProvider for platformBrowserDynamic instead.

Then if you want to use ClientConfig, just inject it:

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

   constructor(private clientConfig: ClientConfig) { }
   .....

answered Mar 01 '17 at 20:49

Tomas Marik

4,053
3
31
62

Wow. Thank you. I was doing something very similar but I had no idea I could provide a service at the `platformBrowserDynamic` step. I have this convoluted process of setting a static instance of the service and grabbing it that way, but this seems a lot cleaner. Thank you. – Jens Bodal Apr 06 '18 at 02:09
1

How can I get the config in AppModule? I need to set some configurations in AppModule based on the ClientConfig. – Rookian Aug 21 '20 at 10:05

score 1 · Answer 2 · answered Jun 02 '20 at 11:30

I had trouble to follow the accepted answer by @tomas-marik which I think was otherwise good. Below is my adaptations in main.ts for use in Angular 8:

fetch('/assets/config.json').then(async res => {
  var clientConf = <ClientConfig>await res.json();

  platformBrowserDynamic(
    [{ provide: ClientConfig, useValue: clientConf }]
  ).bootstrapModule(AppModule)
    .catch(err => console.error(err));
});

Alex Jones · Answer 3 · 2017-03-01T15:14:35.447

If you are wanting to get data before the UI is loaded, you could try using route guards. They will allow you to prevent the user navigating to a route in your application until a condition is true.

You can return an observable from a route guard, allowing for async guarding.

Further reading about Angular route guards.

EDIT: using the resolve property of a route gaurd would be best fit for waiting on data.

Angular 2: External configuration befor bootstrap - passing the value to AppModule

3 Answers3

Linked