Блог

Получение первого опыта работы с angularfire (https://github.com/angular/angularfire) в настоящее время я пытаюсь динамически разрешить свойства конфигурации для инициализации, чтобы использовать одну и ту же версию сборки нашего приложения во всех наших средах (dev, non prod,…).

Для этого я использую предварительный загрузчик среды…

 import { environment } from './environments/environment';
import { environmentLoader } from './environments/environment-loader';
...

/**
 * Loads the environment available in the assets folder. This enables dynamic configuration for Docker images.
 */
export const environmentLoader = new Promise<any>((resolve, reject) => {
    const xmlhttp = new XMLHttpRequest();
    const url = './assets/environments/environment.json';
    xmlhttp.open('GET', url, true);
    xmlhttp.onload = () => {
        if (xmlhttp.status === 200) {
            resolve(JSON.parse(xmlhttp.responseText));
        } else {
            console.warn('Default env is used!');
            resolve(defaultEnvironment);
        }
    };
    xmlhttp.send();
});
 

… в пределах моего основного.ts …

 ...

environmentLoader.then((env) => {
  /**
   * Replaces the environment values with the assets environment.json data.
   */
  Object.assign(environment, env);

  ...

  platformBrowserDynamic()
    .bootstrapModule(AppModule)
    .catch((err) => console.error(err));
});

 

Как вы можете видеть, предварительный загрузчик действительно переключает содержимое локальной среды.ts, используемой для разработки, с конкретными вариантами других сред. Используя этот метод, соответствующие настройки для каждой среды могут использоваться в приложении без необходимости перестройки.

Все это работает довольно хорошо, за исключением инициализации модуля AngularFireModule в app.module.ts. Для этого, по-видимому, необходимо инициализировать модуль в разделе импорта корневого модуля следующим образом…

 
...
import { environment } from 'src/environments/environment';
...

AngularFireModule.initializeApp(environment.firebase);
...
 

Nevertheless the bootstrapping is chained after the execution of the preloader this initialization seems to be performed asynchronously. As a result, the AngularFireModule does always get initialized with the local environment properties and does not consider the environment change (working with the APP_INITIALIZER token to delay the bootstrapping and wait for the environment preload — as I would do in similar cases working with some provider — does not seem to be an option either).

Questions:

• Is there a way to postpone the bootstrap of the app module in another way?
• Есть ли способ отложить вызов метода initializeApp модуля AngularFireModule или инициализировать модуль совершенно по-другому?
• Есть ли способ синхронно загрузить файл JSON до выполнения угловой начальной загрузки?

Спасибо за любые советы, с уважением