模块中的AngularFire2 App初始化与动态配置数据冲突 [英] 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.

然后我从直接注入获得数据.

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

请注意，使用FirebaseUserConfig令牌提供了Firebase配置.

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