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.
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.