Multiple firebase projects in one Angular app 🚀

amammay
amammay
Nov 6 · 3 min read

The other day i was trying to figure out the best way to hook up multiple firebase projects into a single angular app and figured this information might be helpful for other people that have to go down this route as well.

Before i dive into this, here is the source code on github… “Talk is cheap. Show me the code.”

Starting point — Single Firebase Project

With the current app that can talk to one firebase project, most people have something like this to bootstrap the Angular Fire library

Core Module

And then handling the configuration in the environment files.

Env Config

and then are using firestore via dependency injection in their code like

standard usage of angular firestore

So it would be pretty convenient to inject the other instance of the firestore database project using the same signature that AngularFirestore already provides out the box in my eyes.

To accomplish this we will do some slight reconfiguration of the projection to make it multi tenant, the first step being handling our env file via a injection token.

Environment File Handling via Injection Token

First up is to modify our current env config to something like below.

New env config

And then next is to setup some strong typings around our env file and create a injection token for it.

And then finally setup a provider for it.

If you are unfamiliar with injection tokens, i would highly recommend reading up on https://angular.io/api/core/InjectionToken. TLDR You can register things in the DI system with this.

Creating our own FirebaseModule

This module will be handling the creation of the firebase features that we will be using.

First we are going to setup some String injection tokens based on the key that we are using to reference the project in the env file. Since the environment file had ‘PROJECT-ONE’ and ‘PROJECT-TWO’ , we will use the same values.

Up next we will setup our object factories for the things we want to use in firebase. For this example we will target firestore and fireauth.

and then start setting up providers

as a note this specific file in a finished state can be found here

And then just update our usages of using the projects accordingly in our services/components.

and the final result!

Happy coding!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade