Upgrading to AngularFire 6 with Angular 9
Tags: firebase, angular, angularfire, serverless
Published: 2020-04-08 23:42:08

##Angular 9
With Angular 9 release, now it's time to upgrade our Angular project and enjoy the power of [Ivy](https://angular.io/guide/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](https://firebaseopensource.com/projects/angular/angularfire2/) is an official Angular library that wraps Firebase Javascript SDK. It helps Angular developers integrate [Firebase](https://firebase.google.com/) into Angular application with ease, utilizing the power of RxJs and Angular.

## Angular Fire 6
A new version [AngularFire 6.0](https://www.npmjs.com/package/@angular/fire) 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*
```typescript
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*
```typescript
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*
```typescript
  sendEmailVerificationLink(): Promise<void> {
    return this.afAuth.auth.currentUser.sendEmailVerification();
  }
```
*In Version 6*
```typescript
  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*
```typescript
/* AngularFireFunction expects 6 arguments */
options: FirebaseOptions
nameOrConfig: string | FirebaseAppConfig
platformId: Object
zone: NgZone
region: string
origin: string
```

*In Version 6*
```typescript
/* 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*
```typescript
this.angularFirestoreFunctions
.functions
.httpsCallable('functionName')(data)
.then((result) => {
   // handler
})

```

*In Version 6*
```typescript
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.