CODEWITHSUNDEEP
angularjsgoogle-cloud-firestoreangularfire
Antonio Ooi
Antonio Ooi

Reputation: 1828

Firestore: snapshotChanges is not a function

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!

Upvotes: 1

Views: 1147

Answers (1)

Doug Stevenson
Doug Stevenson

Reputation: 317372

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.

Upvotes: 3

Related Questions