Add Firebase AngularFire2 To Ionic Apps Using Angular

In this tutorial, we take a look at how you can add AngularFire2 to you Ionic apps and use firebase. In this post, we will only take a look at the setup of AngularFire2 in Ionic.

Step 1)

We will start by creating a new app. We do that by running the following command in the command prompt.

Note here that I have navigated my terminal inside of the newly created folder as I will be running other commands inside the app folder.

Step 2)

Now we will install firebase and AngularFire2. To do that we will run the following command.

As we are using the--save option, NPM will make an entry of the firebase installation in the package.json file. The package.json file will look something like this.


Step 3)

Head over to and create a new project (You can use your existing one as well). Then click Add Firebase to your Web App.


After that, you will get a modal that will have your configuration code. The code will look something like this.

As we are using Angular/ionic, from the above snippet we will need only the config object as we already have the firebase files npm installed for us.

Step 4)

Now it’s time to add the configuration code to our app. So open up the main module file of your app, for Ionic it is app.module.ts and code it as follows.

Here we are importing AngularFireModule and then creating a variable with our configuration and then passing it to AngularFireModule.initializeApp(). And just like that, we have our app configured to use AngualrFire.

Note here that I am also including and the AngularFireDatabaseModule, AngularFirestoreModule and the AngularFireAuthModule, make sure you only include what you intend to use in your app.



In this tutorial, we saw how to setup AngularFire2 in Ionic. Firebase also has a JavaScript SDK that you can add to your app. The Firebase JavaScript SDK  relies on callbacks and promises for its methods, whereas the AngularFire2 library is Observable based.  As Ionic is based on Angular and we have AngularFire2 it makes more sense to use it.


Leave Me Your Questions And Feedback

Getting your feedback inspires me the most so hit me up in the comments here or on the comments section on my YouTube Channel or on twitter @uncutAcademy
Consider Subscribing / Donating
Subscribe To Mailing List
If my site was helpful to you, then please consider donating via paypal:
Prantik Vaghela

Prantik Vaghela (uncutAcademy)

Hi my name is Prantik Vaghela. I have done my Bachelors and Masters in Computer Science and am a web developer and now a Tutor through my blog. :-)