在 Angular 中动态配置 Firebase 环境

Question

I have a list of data in my mobile app and for each data I can have different firebase configuration file. Requirement is, When I click on any data, it will make a request to our server and pull the firebase configuration from there.

Once the configuration is available to Mobile app, it will use this configuration to connect with firebase and then retrieve data and perform some action.

Is it possible to achieve this?

Or more specifically, Can I do AngularFireModule.initializeApp(environment) in my constructor or in ngOnInit()in mycomponent.component.ts rather than doing it in myModuleName.Module.ts .

Answer 1

By doing AngularFireModule.initializeApp(environment) , you do two things :

• initializing the AngularFire module with your environment variables
• importing the module

So you need to keep at least the import part in a module. Maybe you can check if the firebase module allows initialization after import, which would mean :

1. import the module (in a module)
2. later (when you get the configuration) 'initialize' the Firebase module

If this is not possible, I would suggest to lazy load your firebase module : https://angular.io/guide/lazy-loading-ngmodules

Nb: since you need to initialize the firebase module, you will probably need to wrap the Firebase module inside a standard module.

Answer 2

This is how I get it done. Rather than using it in app module, I specifically used it for the module which needed it.

In module.ts

    import { AngularFirestoreModule } from 'angularfire2/firestore';
    import { AngularFireDatabaseModule } from 'angularfire2/database';
    @NgModule({
      declarations: [
       ...
      ],
      imports: [
        ...
        AngularFirestoreModule,
        AngularFireDatabaseModule],
      exports: [
       ...      ],
      providers: [
       ...
      ]
    })

In the component.ts

import { AngularFirestore } from 'angularfire2/firestore';
import { _firebaseAppFactory } from "angularfire2/firebase.app.module";


  angFirestore: AngularFirestore

ngOnInit(){
    this.angFirestore = new AngularFirestore(_firebaseAppFactory(environment.firebase, environment.localAppName.toString()), false);
    }

ionViewWillUnload(){
      this.clearFirebaseInfo();
      if(this.angFirestore && this.angFirestore.app){
        this.angFirestore.app.delete();
      }
   }

  clearFirebaseInfo(){
    environment.apiKey= "";
    environment.authDomain= "";
    environment.databaseURL= "";
    environment.projectId= " ";
    environment.storageBucket= "";
    environment.messagingSenderId= "";
    environment.appId= "";
  }

And a service to set firebase environment info.