Upgrading to AngularFire 6 with Angular 9

Sreekanth Reddy Pathi Reddy — Wed, 08 Apr 2020 23:42:08 +0000

Angular 9

With Angular 9 release, now it's time to upgrade our Angular project and enjoy the power of Ivy. It is also important not to fall way behind the Angular release schedule to make our Angular project upgrades fast and smooth with every release.

Angular Fire

Angular Fire is an official Angular library that wraps Firebase Javascript SDK. It helps Angular developers integrate Firebase into Angular application with ease, utilizing the power of RxJs and Angular.

Angular Fire 6

A new version AngularFire 6.0 is released to support Angular 9. It is not backward compatible with older Angular versions. It no longer supports older versions of Angular (<9). It also dropped support for older versions of Typescript(<3.6.4), Firebase Javascript SDK (<7.13.1) and firebase-tools(<8.0.0).

Angular Fire Upgrade

Use ng update @angular/core @angular/cli to update project to Angular 9. It will also update Angular Fire version to 6.

Changes required inside code

AngularFireAuth

auth property of AngularFireAuth is deprecated in version 6

Before Version 6

export class UserService {

  constructor(public afAuth: AngularFireAuth) {}

  signIn(): Promise<auth.UserCredential> {
    return this.afAuth.auth.signInWithPopup(new auth.GoogleAuthProvider());
  }
  signout(): Promise<void> {
    return this.afAuth.auth.signOut();
  }
}

In Version 6

import { auth } from 'firebase';

export class UserService {

  constructor(public afAuth: AngularFireAuth) {}

  signIn(): Promise<auth.UserCredential> {
    return this.afAuth.signInWithPopup(new auth.GoogleAuthProvider());
  }
  signout(): Promise<void> {
    return this.afAuth.signOut();
  }
}

Accessing methods without auth property applies to all other methods. The usage of currentUser has also been changed.

Before Version 6

  sendEmailVerificationLink(): Promise<void> {
    return this.afAuth.auth.currentUser.sendEmailVerification();
  }

In Version 6

  sendEmailVerificationLink(): Promise<void> {
    return this.afAuth.currentUser.then((user) => {
      return user.sendEmailVerification();
    });
  }

AngularFireFunctions

There is a change in the arguments list expected by AngularFireFunction. In Version 6, there is no need to pass platformId argument.

Before Version 6

/* AngularFireFunction expects 6 arguments */
options: FirebaseOptions
nameOrConfig: string | FirebaseAppConfig
platformId: Object
zone: NgZone
region: string
origin: string

In Version 6

/* AngularFireFunction expects 5 arguments without platformId*/
options: FirebaseOptions
nameOrConfig: string | FirebaseAppConfig
zone: NgZone
region: string
origin: string

Similar to deprecation of auth property in AngularFireAuth, functions property is deprecated in AngularFireFunctions

Before Version 6

this.angularFirestoreFunctions
.functions
.httpsCallable('functionName')(data)
.then((result) => {
   // handler
})

In Version 6

this.angularFirestoreFunctions
.httpsCallable('functionName')(data)
.subscribe((result) => {
   // handler
})

Similarly messaging property in AngularFireMessaging and performance property in AngularFirePerformance had been deprecated in version 6.

Conclusion

There are some cool new feature added in AngularFire 6. It comes with AngularFireAnalyticsModule and AngularFireRemoteConfigModule.

AngularFireAnalyticsModule has ScreenTrackingService and UserTrackingService. These services can be used to start tracking just by injecting them into our app module without the need of adding gtag script.

AngularFireRemoteConfigModule can be used to modify application behavior with out the need of redeploying. It can be achieved just by modifying remote configuration settings in Firebase Console.

So It's time to upgrade to Angular 9 and AngularFire 6 to experience the ease of utilizing Firebase capabilities.

DEV Community: Sreekanth Reddy Pathi Reddy

Upgrading to AngularFire 6 with Angular 9

Angular 9

Angular Fire

Angular Fire 6

Angular Fire Upgrade

Changes required inside code

AngularFireAuth

AngularFireFunctions

Conclusion