モジュール内の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からデータを取得します。この時点で

**構成サービス（アプリ-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：Firebase設定がFirebaseUserConfigトークンを使用して提供されていることを

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

注意。

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); 
}