title: AngularFire2 App Init in Module Conflicts with Dynamic Config Data
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>AngualrFire2 Setup Page
  <a href="https://github.com/angular/angularfire2/blob/master/docs/1-install-and-setup.md" rel="nofollow noreferrer">https://github.com/angular/angularfire2/blob/master/docs/1-install-and-setup.md</a></p>
  
  <p>Here are my files:</p>
  
  <p>** Config Data Loaded (main.ts) **</p>
  
  <pre><code>function processConfigData(config, env) {
      platformBrowserDynamic([
        {provide: "appConfig", useValue: config},
        {provide: "appEnv", useValue: env}
      ]).bootstrapModule(AppModule);
  }
  </code></pre>
  
  <p>The config data is pulled from the server and is passed in to the app.</p>
  
  <p>Then I get the data from Direct Injection.</p>
  
  <p>** Config Service (app-config.service.ts)**</p>
  
  <pre><code>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];
  } 
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>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: '&lt;your-key&gt;',
    authDomain: '&lt;your-project-authdomain&gt;',
    databaseURL: '&lt;your-database-URL&gt;',
    storageBucket: '&lt;your-storage-bucket&gt;',
    messagingSenderId: '&lt;your-messaging-sender-id&gt;'
  };
  
  @NgModule({
    imports: [
      BrowserModule,
      AngularFireModule.initializeApp(firebaseConfig)
    ],
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ]
  })
  export class AppModule {} 
  </code></pre>
  
  <p>Any help solving this problem is greatly appreciated.</p>