Document properly how to use multiple Firebase projects in one app

There’s a lenghty discussion about this in #1240, and one stackblitz example how to do it, thanks for that!

The comments keep piling, so it seems this is still a source of frustration to people.

The documentation should include examples how to…

• Configure 2 or more projects (for an example projects a, b and c)
• inject realtime database or firestore pointing to project b to Angular component
• inject realtime database or firestore pointing to project c to Angular service (annotated with @Injectable())
• inject two instances of realtime database or firestore pointing to project b and c configuration to Angular component
• inject two instances of realtime database or firestore pointing to project b and c configuration to Angular service (annotated with @Injectable())

So, essentially how to inject like this:

import { Injectable } from '@angular/core'
import { AngularFireDatabase } from 'angularfire2/database'

@Injectable()
export class MyService {

  constructor(
    private storeAppDb: AngularFireDatabase,
    private invoicingAppDb: AngularFireDatabase
  ) {
  }

}

I don’t think Angular supports injection scheme like that, but a blueprint how to achieve the same would be nice. (If I can choose which one to inject, then I can make two wrapper services, that I can inject…)

It would be nice though to be just able to say:

import { Injectable } from '@angular/core'

@Injectable()
export class MyService {

  constructor(
    private angularfire: AngularFire
  ) {
    const firestore1 = angularfire.firestore('conf1')
    const firestore2 = angularfire.firestore('conf2')
  }

}

which would return the angularfireified firestore etc. services.

[ghost]

merci 😃

[james11a]

@swftvsn My solution is implemented in an Ionic application that I am working on… This is tested and working (so far 😃 )

Below is my configuration:

Say the 2 Firebase application configuration variables are firebaseConfigA & firebaseConfigB with their names ‘appA’ & 'appB ’ stored in firebaseAppNameA & firebaseAppNameB.

Note: It is recommended that all such configuration variables are stored in a separate configuration file / custom webpack environment files. The variables will be imported wherever required from here. In my case, I have custom webpack environment setup. If you need help with setting up environments using custom webpack for Ionic, check out this fantastic post from @gshigeto: https://github.com/gshigeto/ionic-environment-variables

Initializing the Firebase applications in your application’s ngModule is not required as this will now be done through a service as shown below.

To the code…

All my Firebase related function are handled in a separate service:

firebase.service.ts

/** Angular imports */
import { Injectable } from "@angular/core";

/** 3rd-party imports */
import { AngularFireDatabase, AngularFireList, AngularFireObject } from "angularfire2/database";
import { _firebaseAppFactory } from "angularfire2/firebase.app.module";
import { FirebaseAppConfig } from "angularfire2";

@Injectable()
export class FirebaseService {
    private _db: AngularFireDatabase;

    constructor() { }

    /** Function to initialize firebase application and
     * get DB provider for the corresponding application.
     */
    public initFirebaseApp(config: FirebaseAppConfig, firebaseAppName: string) {
        this._db = new AngularFireDatabase(_firebaseAppFactory(config, firebaseAppName));
    }

    /** Function to get firebase DB list */
    public getList(path: string): AngularFireList<{}> {
        return this._db.list(path);
    }

    /** Function to get firebase DB object */
    public getObject(path: string): AngularFireObject<{}> {
        return this._db.object(path);
    }
}

Import the above service in your application’s ngModule.

Now, using the service in a component where I connect to both applications:

home.component.ts

// ... do all required imports
import {
    firebaseConfigA, firebaseAppNameA,
    firebaseConfigB, firebaseAppNameB
} from "@app/env";
import { FirebaseService } from "../../services/firebase.service";

@Component({
    selector       : "page-home",
    templateUrl    : "home.html"
})
export class ScannerDemoPage implements OnInit {
    constructor(private _firebaseService: FirebaseService) { }
    
    ngOnInit() {
        // Initialize 1st application
        this._firebaseService.initFirebaseApp(firebaseConfigA, firebaseAppNameA);
        let myList = this._firebaseService.getList("/path1");

        // Initialize 2nd application
        this._firebaseService.initFirebaseApp(firebaseConfigB, firebaseAppNameB);
        let myObj = this._firebaseService.getObject("/path2");
    }
}

Hope this helps.