Get a parameter from HTML before loading is complete

Question

I have an Angular application based on Seed. I want it to wait for the loading of all data before displaying anything. That is done with a provider in my app.module.ts:

providers: [
  AlbumConfig,
  UserConfig,
  {
    provide: APP_INITIALIZER,
    useFactory: (config: AlbumConfig) => () => config.load(),
    deps: [AlbumConfig],
    multi: true
  }
],

Problem is the config.load (which eventually fires a resolve(true)) needs an id given in the HTML page by the server:

<rmalbum-app data-id="<?php print $album_id; ?>">Loading...</rmalbum-app>

The only way I found to get this parameter is in the app.component's constructor:

albumConfig.id= this.elementRef.nativeElement.getAttribute('data-id');

The problem is that this constructor is only called after the initialization.

So I either have, chronologically:

• config.load()
• "Loading..." disappears
• app.component's constructor is called, I get the id, too late for config.load

or, if I remove the APP_INITIALIZER and put the config.load() in the component's constructor:

• "Loading..." disappears
• app.component's constructor is called, I get the id
• config.load() manually called from the constructor

I don't want that because it means the application is displayed before the config is actually loaded.

Answer 1

You don't need to wait for Angular to initialize the root component, the attribute is already added statically to index.html and doesn't need Angular to read.

Just use

albumConfig.id = document.querySelector('app-element')
    .getAttribute('data-id'‌​);