Как получить асинхронные данные до того, как Angular загрузит свои модули - PullRequest
Новая
       6

Как получить асинхронные данные до того, как Angular загрузит свои модули

0 голосов
/ 09 ноября 2018

Я пытаюсь вставить переменную в forRoot({[...]}) метод углового модуля.

Я получил эту переменную асинхронно, поэтому я попытался получить ее до начальной загрузки Angular. (Исходит от cordova.js )

Проблема:

Похоже, что Angular импортирует модули (и вызывает методы 'forRoot') перед загрузкой.

Есть ли способ достичь этого?

Спасибо!

Пример того, что я пробовал:

app.module.ts 

import {NgModule} from '@angular/core';
import {AgmCoreModule} from '@agm/core';

@NgModule({
  imports: [
    AgmCoreModule.forRoot({
      apiKey: window['device'].platform, // value is 'null' instead of 'browser' or something else
      libraries: ['places']
    })
  ],
  // [...]
  bootstrap: [AppComponent]
})

export class AppModule {
}

ЦСИ / main.ts 

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

document.addEventListener('deviceready', () => {
  console.log(window['device'].platform); // log 'browser'
  platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.log(err));
}, false);

/! \ Советы

Библиотека, которую я использую (@ agm / core), ожидает строку как apiKey , а не функцию ...

1 Ответ

0 голосов
/ 09 ноября 2018

Вы можете использовать APP_INITIALIZER , чтобы предоставить фабрику, которая будет выполняться после импорта модуля, но до Bootstrap. Таким образом, вы можете установить apiKey на любое значение и переопределить его на фабрике: создайте функцию для извлечения необходимых данных и установите apiKey в объект LAZY_MAPS_API_CONFIG. Начальная загрузка приложения будет продолжена после разрешения всех APP_INITIALIZERS. 

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { AgmCoreModule, LAZY_MAPS_API_CONFIG, LazyMapsAPILoaderConfigLiteral } from '@agm/core';
import { AppComponent } from './app.component';
import { map } from 'rxjs/operators';

export function agmConfigFactory(http: HttpClient, config: LazyMapsAPILoaderConfigLiteral) {
  return () => http.get<{mapsApiKey: string}>("url").pipe(
    map(response => {
        config.apiKey = response.mapsApiKey;
        return response;
    })
  ).toPromise();
}

@NgModule({
  imports:      [ BrowserModule, HttpClientModule, AgmCoreModule.forRoot({ apiKey: "initialKey"}) ],
  declarations: [ AppComponent ],
  providers: [ {
    provide: APP_INITIALIZER, 
    useFactory: agmConfigFactory, 
    deps: [HttpClient, LAZY_MAPS_API_CONFIG], 
    multi: true} 
    ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }
...