Upgrade your Ionic App to Firebase 5+ and AngularFire2 rc-10

First Published: 17 June 2018
Updated on: 24 September 2018

Great news, thanks to some book readers that pointed me out in the right direction I managed to upgrade my book Master Firestore to the latest versions of Firebase and AngularFire2, right now we’re using:

"angularfire2": "^5.0.0-rc.10",
"firebase": "^5.0.4",
"ionic-angular": "3.9.2"

And the app is working fine, the best news, when you upgrade to Ionic 4 in the future you won’t have to refactor this part :-)

I’ll use the next few lines to explain step-by-step how we did this. We take advantage of a library called rxjs-compat to upgrade our apps, the steps to upgrade are:

Install the latest version of these packages

"angularfire2": "^5.0.0-rc.10",
"firebase": "^5.0.4",
"ionic-angular": "3.9.2",
"rxjs": "^6.2.1",
"rxjs-compat": "^6.2.1"

AngularFire2 needs rxjs 6+ to work, but Ionic needs rxjs 5 to work, so we’re installing the rxjs-compat library that will let you install the latest version and keep the backward compatibility.

Update @ionic/app-scripts

Make sure you’re on "@ionic/app-scripts": "^3.1.10", I was using "@ionic/app-scripts": "^3.1.9", and it gave me a webpack error.

Refactor Authentication:

Since Firebase 5 the function createUserWithEmailAndPassword() stopped returning a User object, it now returns a UserCredential object that has the user object inside, so if you were doing something like this:

this.afAuth.auth.createUserWithEmailAndPassword(email, password).then(user => {
  console.log(user);
});

You’ll need to change it to something like

this.afAuth.auth
  .createUserWithEmailAndPassword(email, password)
  .then(userCredential => {
    console.log(userCredential.user);
  });

Other than that, if you’re using rxjs more extensively you should read this migration guide so that you can refactor your rxjs imports.

If you want to take a deeper dive on Ionic + Firestore you should go through my FREE course: Build your first Firestore powered Ionic app.

Any questions? Leave a comment below!