You have unlimited access as a PRO member
You are receiving a free preview of 3 lessons
Your free preview as expired - please upgrade to PRO
- Object Oriented Programming With TypeScript
- Angular Elements Advanced Techniques
- TypeScript - the Basics
- Cloud Scheduler for Firebase Functions
- Testing Firestore Security Rules With the Emulator
- How to Use Git and Github
- Infinite Virtual Scroll With the Angular CDK
- Build a Group Chat With Firestore
- Async Await Pro Tips
Migration Guide for AngularFire V5 + Firestorewritten by Jeff Delaney
AngularFire v5.0.0 was released in October 2017 and was a complete rewrite of the realtime database API (with breaking changes). Simultaneously, Firebase released the new Firestore Database, which has many awesome advantages over the realtime DB.
The goal of this page is to show you how to use past lessons and videos with the new API and/or upgrade to the Firestore database.
Not sure which version you’re using?
Look inside the
package.json file in the root of your Angular app. Under dependencies, you should see
I have produced a large library of content that covers specialized features with AngularFire. It would be nearly impossible to go back and refactor all written and video content. Instead, I am going to provide new revised lessons over the next couple months that take advantage of Firestore and soon-to-be-released Angular 5. I will create brand new content for the most popular concepts, such as infinite scroll, autocomplete search, and many more.
The underlying design patterns in past lessons are still valid, but will require some modification to the source code. The guide exists so you can still take advantage of these lessons with the new API and Firestore database.
Any lesson that uses AngularFire v4 will have a notice that looks like this at the top of the page with a link to this migration guide.
I am offering up three different strategies for upgrading your app to AngularFire version 5.
Past lessons using AngularFire2 v4 will not work in the latest version. Fortunately, the AngularFire team realized this issue and kept the old API available under a different namespace of
database-deprecated. You can make your code work by simply updating your imports.
Any lesson that imports from
angularfire2/database should be changed to
You code should now look like this:
Fully migrating to the new API is going to be a little more tedious. The main difference in v5 is the decoupling of the
Observable from its reference to firebase.
Let’s compare the APIs.
/// *** Version 4 ***
Here is the basic process you will need to follow to update from v4 to v5:
For database write operations (push, update, set, remove), you will need to convert every
Firebase(List | Object)Observableinto the new
AngularFire(List | Object)reference.
To read data as an
Observableyou will need to call
snapshotChanges()on the reference created in the previous step.
The RealtimeDB has its share of annoying limitations. Exhibit A: querying/filtering data is very difficult. Exhibit B: Nested data is impossible on large datasets, requiring you to denormalize at the global level. Lucky for you, Firestore addresses these issues head on so you’re in great shape if just starting a new app. That being said, I recommend using Firestore in the majority of situations.
If you have questions about data structuring, let’s chat about it. Here’s your Slack invite link.
Firestore allows you to nest collections inside of documents without loading all the data into memory. This allows you to structure your database like so:
Here’s how the API differs from the lessons that use the Realtime DB.
/// *** Version 4 ***
The API for Firestore is very similar to the realtime DB, but lists are called collections and objects are called documents. Learning Firestore is not very difficult if you already have experience with Firebase. If you want to learn more, checkout the Firestore Quick Start Tutorial.