Map function in RXJS 6.5.1 And Angular 8 with Firestore Collection

Question

I am using AngularFire with RxJS 5.4.0 and Firebase. This below code works fine:

 this.questions$ = dbQuestions$.map(snapshots =>
    snapshots.map(data =>
    this.FilterControls(data)
  ));

When I use the code below with RXJS 6.5.1, Angular 8 and Firestore (shown below), I receive the Error:

Property 'map' does not exist on type 'AngularFirestoreCollection<{}>'

 this.questions$ = dbQuestions$.map(snapshots => {
   snapshots.map(data => this.FilterControls(data))
 });

Answer 1

The error "map does not exist on type AngularFirestoreCollection<{}>" is due to breaking changes made in RXJS version 5.5.

Pipeable Operators

Starting in version 5.5 we have shipped "pipeable operators", which can be accessed in rxjs/operators... These are meant to be a better approach for pulling in just the operators you need than the "patch" operators found in rxjs/add/operator/*.

With the new pipeable operators, your code would look like:

import { Component } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';

import { Observable } from 'rxjs/Observable';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  dbQuestionCollection: AngularFirestoreCollection<{}>;
  dbQuestions$: Observable<{}[]>;

  constructor(private afs: AngularFirestore) {
    this.dbQuestionCollection = this.afs.collection<{}>('questions');
    this.dbQuestions$ = this.dbQuestions$ = this.dbQuestionCollection.snapshotChanges().pipe(
      map(actions => actions.map(a => {
        const data = a.payload.doc.data(); // DB Questions
        const id = a.payload.doc.id;
        return { id, ...data };
      }))
    )
  }
}