Step-by-step Guide: Setup an AngularFire Ionic Project

Libraries and Versions

Last Reviewed: Sep 13, 2020

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 four simple 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

Depending on your operating system (mostly if you run on Linux or Mac) you might have to add sudo before the npm install.... command.

Step #2: Create the app

Now that you made sure everything is installed and up to date, you'll create a new Ionic 2 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 debtTracker blank --type=angular
cd debtTracker

What those lines there do is the following:

First, you'll navigate to the Development folder.
Second, you'll create the new Ionic 2 app:
- ionic start creates the app.
- debtTracker is the name we gave it.
- blank tells the Ionic CLI you want to start with the blank template.
- --type=angular sets the project as an Angular project.
Third, you'll navigate into the new debtTracker 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: Install the `npm` packages you'll need

The `npm` packages that come with the project

When you use the Ionic CLI to create a new project, it's going to do a lot of things for you, one of those things is making sure your project has the necessary npm packages/modules it needs.

That means, the start command is going to install ionic-angular all of the angular requirements and more, here's what the package.json file would look like:

{
  "name": "ionic-hello-world",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "dependencies": {
    "@ionic/angular": "^5.3.0"
  }
}

Depending on when you read this, these packages might change (specially version numbers) so keep that in mind, also you can leave a comment below if you have any questions/issues/problems with this.

Install AngularFire

For this project to work you'll need to install a couple of extra packages. You need to install AngularFire and Firebase.

Open your terminal (you should already be in the project folder) and install:

npm install firebase @angular/fire --save

Step #4: Import and Initialize

Now you can initialize firebase by going to src/app/app.module.js and importing everything you need from Firebase:

You can open your app.module.ts and import everything we'll be using, and this is the only time you'll see this file :)

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

// Import the AngularFire Module
import { AngularFireModule } from '@angular/fire';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFirestoreModule } from '@angular/fire/firestore';

// AngularFire Settings
export const firebaseConfig = {
  apiKey: '',
  authDomain: '',
  databaseURL: '',
  storageBucket: '',
  messagingSenderId: '',
};

And then add the initialize to @NgModule:

@NgModule({
  declarations: [MyApp, HomePage],
  imports: [
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireAuthModule,
    AngularFirestoreModule,
  ],
  bootstrap: [IonicApp],
  entryComponents: [MyApp, HomePage],
  providers: [{ provide: ErrorHandler, useClass: IonicErrorHandler }],
})
export class AppModule {}

In the end the file should look like this:

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

// Import the AngularFire Module
import { AngularFireModule } from '@angular/fire';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFirestoreModule } from '@angular/fire/firestore';

// AngularFire Settings
export const firebaseConfig = {
  apiKey: '',
  authDomain: '',
  databaseURL: '',
  storageBucket: '',
  messagingSenderId: '',
};

@NgModule({
  declarations: [MyApp, HomePage],
  imports: [
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireAuthModule,
    AngularFirestoreModule,
  ],
  bootstrap: [IonicApp],
  entryComponents: [MyApp, HomePage],
  providers: [{ provide: ErrorHandler, useClass: IonicErrorHandler }],
})
export class AppModule {}

We are using:

// AngularFire Settings
export const firebaseConfig = {
  apiKey: '',
  authDomain: '',
  databaseURL: '',
  storageBucket: '',
  messagingSenderId: '',
};

To store our config object. And then passing it to the initialization:

imports: [
  IonicModule.forRoot(MyApp),
  AngularFireModule.initializeApp(firebaseConfig),
  AngularFireAuthModule,
  AngularFirestoreModule
],

Right there your app should be able to run without any errors when you do ionic serve

You can find your firebaseConfig data in the Firebase's Console.

You just go to the console, click on your app (or create a new one) and there it's going to give you a few choices.

You'll pick Add Firebase to your web app because remember we are going to use a mix of AngularFire with the JS SDK.

Firebase Console

Conclusion

Right 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 everything was up-to-date.
Step #2: You used the Ionic CLI to create the app.
Step #3: You installed all the npm packages you needed.
Step #4: You importer and initialized Firebase.