How To Set Up Firebase in Ionic 4 and Angular

Caroline Choi

Google Firebase is the love of my life. It’s noSQL and easily accessible online, thanks to Google’s sweet UX team. Firebase gives you functionality like analytics, auth, databases, messaging and crash reporting so you can move quickly and focus on your users.

Interested yet? Let’s get started with Firebase and Ionic 4 by showing you how to set things up.

The setup illustrated in this post is based on an Ionic/Angular project, so this same setup will work just as well in a regular Angular project without Ionic.

Starting a New Project

Start a new Ionic 4 project that uses Angular by running the ionic start in your command line:

$ ionic start alligator_firebase --type=angular

While your new Ionic 4 project is building, let’s head over to the Firebase Console. If you are not logged into a Google account, do so now!

This is the easy part. Click the white and blue “Add Project” button and type in a name for your awesome new project under “Project Name”. I’m going to go with “Alligator”.

Click “Create Project”. Once it loads, proceed to your new project.

Getting the Config Rules

You should now be on a blue page with your project title written on the top left corner.

Click the HTML div tag icon underneath your project title. You should now see a pop-up that contains a code snippet that looks very similar to the one below.

<script src="https://www.gstatic.com/firebasejs/5.9.4/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "djlsjdflkasjlfk__339201",
    authDomain: "alligator-9930.firebaseapp.com",
    databaseURL: "https://alligator-9930.firebaseio.com",
    projectId: "alligator-9930",
    storageBucket: "alligator-9930.appspot.com",
    messagingSenderId: "20948309483"
  };
  firebase.initializeApp(config);
</script>

The config credentials I am showing you above are not real API keys and URLs. Be wary when publishing Firebase configs in a repository or website. Anyone with those credentials, as we will soon see, may read and write to your database.

Copy the portion on your Firebase project that corresponds to the highlighted code above.

Install AngularFirebase Dependencies

Before you add any Firebase to your new Ionic 4 project, make sure that you have installed AngularFire2. To do so, run the following command in your CLI:

$ npm install @angular/fire

Transferring Config Rules to Ionic

Now that you have your config rules, you must paste them into a few files in your Ionic 4 app. cd into the Ionic 4 app we started, and head on over to the file environment.prod.ts (the production environment file), located in the environments folder.

Add in the config credentials that you copied earlier:

environment.prod.ts

export const environment = {
  production: true,
  firebase: {
    apiKey: "your_apiKey",
    authDomain: "your_authDomain",
    databaseURL: "your_databaseURL",
    projectId: "your_projectID",
    storageBucket: "your_storageBucket",
    messagingSenderId: "your_messagingSenderId"
  }
};

Next, head over to the environment.ts, located in the same folder:

environment.ts

export const environment = {
  production: false,
  firebase: {
    apiKey: "your_apiKey",
    authDomain: "your_authDomain",
    databaseURL: "your_databaseURL",
    projectId: "your_projectId",
    storageBucket: "your_storageBucket",
    messagingSenderId: "your_messagingSenderId"
  }
};

Finally, locate the root module file (app.module.ts). Import your newly installed @angular/fire modules and your environment.ts file like the highlighted code snippet below.

app.module.ts

// ...

// firebase imports, omit what you don't need for your app
import { AngularFireModule } from '@angular/fire';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { AngularFireStorageModule } from '@angular/fire/storage';

// environment
import { environment } from '../environments/environment';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule, 
    IonicModule.forRoot(), 
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAuthModule,
    AngularFireDatabaseModule,
    AngularFireStorageModule
  ],</span>
// ...

That's all there is to it! Go out there and make your AngularFire Ionic app a success!

  Tweet It

🕵 Search Results

🔎 Searching...

Sponsored by #native_company# — Learn More
#native_title# #native_desc#
#native_cta#