模块中的 AngularFire2 App Init 与动态配置数据冲突 [英] AngularFire2 App Init in Module Conflicts with Dynamic Config Data

问题描述

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

I have a problem due to my config data being loaded at runtime and AnuglarFire2 wanting the data in the module declaration. I can access the data via direct injection, but I cannot figure out how to get the data to AngularFireModule in my module file.

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

Having the data loaded at runtime is the preferred way to get configuration data to the app. So, I cannot change this process. Therefore, I need to come up with a solution to the problem.

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

AngualrFire2 Setup Page https://github.com/angular/angularfire2/blob/master/docs/1-install-and-setup.md

这是我的文件:

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

** Config Data Loaded (main.ts) **

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

从服务器拉取配置数据并传递给应用程序.

The config data is pulled from the server and is passed in to the app.

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

Then I get the data from Direct Injection.

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

** Config Service (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 推荐的用于设置它的代码:

At this point, I only know how to get the config data from direct injection. I cannot figure out how to get it into the module to configure AngularFire2. Here is the code AngularFire2 is recommending for setting it up:

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 {} 

非常感谢您对解决此问题的任何帮助.

Any help solving this problem is greatly appreciated.

推荐答案

对AngularFireModule.initializeApp 的调用并没有做任何神奇的事情，它只是返回模块和一些提供者:

The call to AngularFireModule.initializeApp doesn't do anything magical, it simply 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 令牌提供的.

Note that the Firebase config is provided using the FirebaseUserConfig token.

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

Some of the tokens used in AngularFireModule.initializeApp are not public, so the best approach is to call AngularFireModule.initializeApp and filter the config provider from the result. The config provider can then be made available in the call to platformBrowserDynamic using the information you have obtained dynamically:

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 与动态配置数据冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！