How To Set Up Firebase in Ionic 4 and Angular

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.

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>

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

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

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:

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:

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.

// ...

// 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';