模块中的 AngularFire2 App Init 与动态配置数据冲突

Question

我遇到了一个问题，因为我的配置数据是在运行时加载的，而 AnuglarFire2 想要模块声明中的数据。我可以通过直接注入访问数据，但我不知道如何在我的模块文件中将数据获取到 AngularFireModule。

在运行时加载数据是向应用程序获取配置数据的首选方式。所以，我无法改变这个过程。因此，我需要想出一个解决问题的办法。

AngualrFire2 设置页面 https://github.com/angular/angularfire2/blob/master/docs/1-install-and-setup.md

这是我的文件：

** 已加载配置数据 (main.ts) **

function processConfigData(config, env) {
    platformBrowserDynamic([
      {provide: "appConfig", useValue: config},
      {provide: "appEnv", useValue: env}
    ]).bootstrapModule(AppModule);
}

从服务器拉取配置数据并传入应用。

然后我从 Direct Injection 中获取数据。

** 配置服务 (app-config.service.ts)**

import { Inject, Injectable } from '@angular/core';

// Code came from: 
https://gist.github.com/fernandohu/122e88c3bcd210bbe41c608c36306db9


@Injectable()

export class AppConfig {


constructor(@Inject("appConfig") private config, @Inject("appEnv") private env) {
}

/**
 * Use to get the data found in the second file (config file)
 */
public getConfig(key: any) {
  return this.config[key];
}

/**
 * Use to get the data found in the first file (env file)
 */
public getEnv(key: any) {
  return this.env[key];
} 

此时，我只知道如何从直接注入中获取配置数据。我无法弄清楚如何将其放入模块中以配置 AngularFire2。以下是 AngularFire2 推荐的设置代码：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularFireModule } from 'angularfire2';

// Must export the config
export const firebaseConfig = {
  apiKey: '<your-key>',
  authDomain: '<your-project-authdomain>',
  databaseURL: '<your-database-URL>',
  storageBucket: '<your-storage-bucket>',
  messagingSenderId: '<your-messaging-sender-id>'
};

@NgModule({
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(firebaseConfig)
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule {} 

非常感谢任何解决此问题的帮助。

Answer 1

对AngularFireModule.initializeApp 的调用并没有什么神奇的作用，它只是returns the module along with some providers：

export class AngularFireModule {
  static initializeApp(config: FirebaseAppConfig, authConfig?: AuthConfiguration, appName?: string): ModuleWithProviders {
    return {
      ngModule: AngularFireModule,
      providers: [
        { provide: FirebaseUserConfig, useValue: config },
        { provide: FirebaseConfig, useFactory: _getDefaultFirebase, deps: [FirebaseUserConfig] },
        { provide: FirebaseAuthConfig, useValue: authConfig },
        { provide: FirebaseAppName, useValue: appName }
      ]
    }
  }
}

请注意，Firebase 配置是使用 FirebaseUserConfig 令牌提供的。

AngularFireModule.initializeApp 中使用的某些令牌不是公开的，因此最好的方法是调用AngularFireModule.initializeApp 并从结果中过滤配置提供程序。然后可以使用您动态获得的信息在对platformBrowserDynamic 的调用中使配置提供程序可用：

import {
  AngularFireModule,
  AuthMethods,
  AuthProviders,
  FirebaseUserConfig
} from "angularfire2";

// Call initializeApp, passing an empty config object:

const angularFireImport = AngularFireModule.initializeApp({}, {
  method: AuthMethods.Password,
  provider: AuthProviders.Password
});

// Filter the config from the providers:

angularFireImport.providers = angularFireImport.providers.filter(
  (provider: any) => provider.provide !== FirebaseUserConfig
);

@NgModule({
  bootstrap: [AppComponent],
  imports: [
    angularFireImport,
    BrowserModule,
    FormsModule
  ]
})
class AppModule {}

// Provide the Firebase config in the platformBrowserDynamic call:

function processConfigData(config, env) {

  const firebaseConfig = {
    apiKey: '<your-key from the dynamic config>',
    authDomain: '<your-project-authdomain from the dynamic config>',
    databaseURL: '<your-database-URL from the dynamic config>',
    messagingSenderId: '<your-messaging-sender-id from the dynamic config>',
    storageBucket: '<your-storage-bucket from the dynamic config>'
  };

  platformBrowserDynamic([
    { provide: "appConfig", useValue: config },
    { provide: "appEnv", useValue: env },
    { provide: FirebaseUserConfig, useValue: firebaseConfig }
  ]).bootstrapModule(AppModule);
}