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.
Top comments (4)
Hoi (that's Dutch for Hi) Sreekanth Reddy Pathi Reddy,
Thanks for your sharing these State-of-the-Art changes. May I add one small contribution? I guess you do allow me, because you are XTeam? and it saved me some time to figure out, what to choose (and understand what service is needed).
In the second picturebox (the version 6 one), the line
Promise typed signIn(...)-method, the
Entity 'auth.UserCredentials' needs an import statement:
import { auth } from 'firebase'.
I would suggest to add that import as well in this picturebox, because their is another one to choose (which isn't obviously not the right one)!
Are you connected to XTeam? I guess you are. I just signed up last week to become involved as wel however pretty busy organising some spare seconds to go to the whole process.
So do not blame me for not having a template yet!
With Regards,
Koen
Hi K.W.H.J. van der Kamp,
Thanks for the suggestion. I am not sure about the other import but I added the import statement as you suggested. Glad to know this helped you.
In attempting to update using the command:
ng update @angular/core @angular/cli
It failed with the following error:
Your global Angular CLI version (9.1.9) is greater than your local
version (9.0.0-rc.7). The local Angular CLI version is used.
To disable this warning use "ng config -g cli.warnings.versionMismatch false".
The installed Angular CLI version is older than the latest stable version.
Installing a temporary version to perform the update.
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Using package manager: 'npm'
Collecting installed dependencies...
Found 33 dependencies.
Fetching dependency metadata from registry...
Package '@angular/core' is already up to date.
Package "codelyzer" has an incompatible peer dependency to "@angular/compiler" (requires ">=2.3.1 <8.0.0 || >7.0.0-beta <8.0.0" (extended), would install "9.1.11").
✖ Migration failed: Incompatible peer dependencies found.
Peer dependency warnings when installing dependencies means that those dependencies might not work correctly together.
You can use the '--force' option to ignore incompatible peer dependencies and instead address these warnings later.
See "/tmp/ng-soyA2A/angular-errors.log" for further details.
is the new version of Angularfire compatible with rxjs-6??