Get parameter from HTML before loading is complete

Question

I have a Seed-based Angular app. I want it to wait for all the data to load before displaying anything. This is done with the provider in my app.module.ts:

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

The problem is that config.load(which ultimately starts resolve(true)) needs the identifier specified on the HTML page by the server:

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

The only way to find this parameter in the constructor is app.component:

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

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

So, I either chronologically:

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

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

• "..."
• app.component, id
• config.load()

, , .

Answer 1

Angular , index.html Angular .

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