Integrate the latest version of @angular/fire with Ionic Framework

Today I want to share with you a step-by-step guide on how to set-up a new AngularFire Ionic project so you can start building your apps in no time.

We’re going to break things down into 3 steps you’ll need to follow.

Step #1: Make sure your development environment is up to date

Before writing any code, we are going to take a few minutes to install everything you need to be able to build this app, that way you won’t have to be switching context between coding and installing.

The first thing you’ll do is install nodejs.

The second thing you’ll do is make sure you have Ionic installed, you’ll do that by opening your terminal and typing:

npm install -g @ionic/cli

Step #2: Create the app

Now that you made sure everything is installed and up to date, you’ll create a new Ionic app.

For this, you just need to (while still in your terminal) navigate to the folder you’d like to create it in.

For me, it’s my Development folder in my ~/ directory:

cd Development
ionic start

Then follow the prompts to select the app’s name, framework (Angular), and the starting template.

Then, you’ll navigate into the new app folder, that’s where all of your app’s code is going to be.

From now on, whenever you are going to type something in the terminal, it’s going to be in this folder unless I say otherwise.

Step #3: Use the ng add schematic

The amazing James Daniels created a schematic that will handle ALL the configuration for you.

And I do mean all the configuration, you’ll be able to even create a firebase project from there 🎉.

To get it running, you’ll need to open the terminal in the root of your project and type:

ng add @angular/fire

This will open a prompt and start asking questions for you to answer, things like:

  • Picking which Firebase project to use.
  • Picking which app inside the project (in case you have many)
  • Creating a new app (or even a new project)
  • Which Firebase APIs you’ll want to use (Authentication, Firestore, Hosting, etc.)

Once you’re done choosing, it will update your Ionic application, adding the Firebase credentials, all of the initialization code to the app.module.ts file, and all the firebase configuration files.

And that’s it, now you have the skeleton of an app ready to work, let’s do a quick recap of how we got there!

  • Step #1: You made sure all the needed packages were up-to-date and installed.
  • Step #2: You used the Ionic CLI to create the app.
  • Step #3: You used the ng add @angular/fire schematic to set everything up.