Firestore: snapshotChanges is not a function

Question

In reference to this post, I hit a problem where it says snapshotChanges is not a function:

TypeError: db.collection(...).snapshotChanges is not a function
    at new <anonymous> (index.js:139)
    at Object.instantiate (angular.js:5156)
    at angular.js:11719
    at Object.link (angular-route.js:1251)
    at angular.js:1388
    at Ba (angular.js:11266)
    at p (angular.js:10585)
    at g (angular.js:9832)
    at angular.js:9697
    at angular.js:10111 "<ng-view autoscroll="true" class="ng-scope">"

Below is my code: (Note that with or without pipe() will also hit the same error too.)

var db = firebase.firestore();

        $scope.accounts = db.collection("Accounts").snapshotChanges().pipe(map(actions => {
            return actions.map(a => {
                const data = a.payload.doc.data();
                const id = a.payload.doc.id;
                return { id, ...data };
            });
        }));

On my SPA index.html, I have the following references defined:

<script defer src="/__/firebase/6.4.1/firebase-app.js"></script>
  <script defer src="/__/firebase/6.4.1/firebase-auth.js"></script>
  <script defer src="/__/firebase/6.4.1/firebase-firestore.js"></script>
  <script defer src="/__/firebase/6.4.1/firebase-messaging.js"></script>
  <script defer src="/__/firebase/6.4.1/firebase-storage.js"></script> -->
  <script defer src="/__/firebase/init.js"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular-route.min.js"></script>

  <!-- AngularFire -->
  <script src="https://cdn.firebase.com/libs/angularfire/2.3.0/angularfire.min.js"></script>

May I know why this error (snapshotChanges is not a function) still appear? I need it to include the doc.id in my mapping result, thank you!

Doug Stevenson · Accepted Answer · 2019-08-29 22:40:14Z

3

If you're using the plain JavaScript SDK to query Firestore, and you want to attach a listener to a Query, you should be using onSnapshot() for that.

If you want to use the AngularFire API instead and use snapshotChanges, that's going to require a going through its own API (see the link), which is different than the plain JavaScript SDK.

answered Aug 29, 2019 at 22:40

Doug Stevenson

321k37 gold badges458 silver badges474 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Antonio Ooi Over a year ago

But now it says map is not defined. How can I achieve the same result by using onSnapshot()?

Doug Stevenson Over a year ago

I think you might want to review the AngularFire documentation I linked to in order to understand how to use its APIs. Don't use the plain JavaScript documentation if you want to use snapshotChanges and the other Angular APIs. They work differently.

Collectives™ on Stack Overflow

Firestore: snapshotChanges is not a function

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related