模块中的 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);
}

配置数据从服务器中提取并传递到应用程序。

然后我从直接注入中获取数据。

** 配置服务 (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 中使用的某些标记不是 public，因此最好的方法是调用 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);
}

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

AngularFire2 App Init in Module Conflicts with Dynamic Config Data

firebase

angularfire2

angular