@firebase/firestore: Firestore (10.7.1): Could not reach Cloud Firestore backend. Backend didn't respond within 10 seconds. about angularfire HOT 5 CLOSED

//// This Service would be a non singleton instance since it is used by multiple list modules and data has to be fresh for each module
//// Hence, its not provided through Service module, but rather its provided through individual list components
import { Injectable, OnDestroy } from "@angular/core";
import {
  AngularFirestore,
  DocumentSnapshot,
  Query,
} from "@angular/fire/compat/firestore";
import { WhereFilterOp } from "@firebase/firestore-types";
import { Subject } from "rxjs";
import { takeUntil, auditTime, map } from "rxjs/operators";
import * as firebase from "firebase/compat/app";
import { NgxSpinnerService } from "ngx-spinner";
@Injectable({
  providedIn: "root",
})
export class LazyloadService<T> implements OnDestroy {
  tableData: T[] = [];
  where: { key: string; op: WhereFilterOp; value: string | string[] }[] | null =
    [];
  limit = 10;
  collection = "";
  dataLoading = false;
  doneLoading = false;
  spinnerName = "pageLoader";
  // save last document in snapshot of items received
  private lastInResponse: DocumentSnapshot<T> | any;

  // keep the array of first document of previous pages
  private prev_strt_at: DocumentSnapshot<T>[] = [];

  subs$: Subject<void> = new Subject<void>();

  constructor(
    private afs: AngularFirestore,
    private spinnerService: NgxSpinnerService
  ) {}

  loadItems({ isReset = false, isNext = false }) {
    if (isReset) {
      this.dataLoading = false;
      this.doneLoading = false;
      this.tableData = [];
      this.spinnerName = "pageLoader";
    }
    if (this.doneLoading) {
      this.spinnerService.hide("pageLoader");
      this.spinnerService.hide("contentLoader");
    }
    if (this.dataLoading || this.doneLoading) {
      return;
    }
    this.spinnerService.show(this.spinnerName);
    this.dataLoading = true;
    return this.afs
      .collection(this.collection, (ref) => this.createQueryRef(ref, isNext))
      .snapshotChanges()
      .pipe(
        takeUntil(this.subs$),
        auditTime(1000),
        map((response) => {
          this.doneLoading = response.length === 0;
          this.spinnerService.hide(this.spinnerName);
          this.lastInResponse = response[response?.length - 1]?.payload.doc;
          this.push_prev_startAt(this.lastInResponse);
          response.forEach((record) => {
            // Avoid pushing duplicates
            if (
              this.tableData.filter(
                (item: any) => item["id"] === record?.payload.doc.id
              ).length <= 0
            ) {
              this.tableData.push({
                ...(record?.payload.doc.data() as T),
                id: record?.payload.doc.id,
              });
            }
          });
          this.dataLoading = false;
          return;
        })
      );
  }

  private createQueryRef(ref: any, isNext: boolean): Query {
    let queryRef: Query = ref;
    let orderByKey: any = "modifiedDate";
    let order: any = "desc";
    if (this.where) {
      this.where.forEach((condition, index) => {
        const { orderByKeyVal, orderVal, queryRefVal } = this.updateQueryRef(
          condition,
          index,
          orderByKey,
          order,
          queryRef
        );
        queryRef = queryRefVal;
        orderByKey = orderByKeyVal;
        order = orderVal;
      });
    }
    queryRef = queryRef.limit(this.limit);
    if (orderByKey !== "date") {
      queryRef = queryRef.orderBy(orderByKey, order);
    }
    if (isNext && this.lastInResponse) {
      queryRef = queryRef.startAfter(this.lastInResponse);
    }
    return queryRef;
  }

  private updateQueryRef(
    condition: { key: string; op: WhereFilterOp; value: string | string[] },
    index: number,
    orderByKey: any,
    order: any,
    queryRef: Query
  ): { orderByKeyVal: any; orderVal: any; queryRefVal: Query } {
    const key =
      condition.key === "id"
        ? firebase.default.firestore.FieldPath.documentId()
        : condition.key;
    if (index === 0 && !condition.key?.includes(".")) {
      orderByKey = key;
      order = condition.key === "id" ? "asc" : "desc";
    } else if (condition.key?.includes(".")) {
      orderByKey = firebase.default.firestore.FieldPath.documentId();
    }
    if (condition.value instanceof Array) {
      condition.value = condition.value.splice(0, 10);
    }
    queryRef = queryRef.where(key, condition?.op, condition?.value);
    return {
      orderByKeyVal: orderByKey,
      orderVal: order,
      queryRefVal: queryRef,
    };
  }

  push_prev_startAt(prev_first_doc: DocumentSnapshot<T>) {
    this.prev_strt_at.push(prev_first_doc);
  }

  ngOnDestroy() {
    this.subs$.next();
    this.subs$.complete();
  }
}

import { APP_ID, NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { RouterModule } from "@angular/router";
import { NgbModule } from "@ng-bootstrap/ng-bootstrap";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { SharedModule } from "./shared/shared.module";
import { CoreModule } from "./core/core.module";
// Firebase/Firestore
import { getApp, initializeApp, provideFirebaseApp } from "@angular/fire/app";
import { provideAuth, getAuth, connectAuthEmulator } from "@angular/fire/auth";
import {
  initializeAppCheck,
  provideAppCheck,
  ReCaptchaEnterpriseProvider,
} from "@angular/fire/app-check";
import {
  initializeFirestore,
  persistentLocalCache,
  persistentMultipleTabManager,
  provideFirestore,
  connectFirestoreEmulator,
  Firestore,
  getFirestore,
} from "@angular/fire/firestore";
import { environment } from "src/environments/environment";
import { NgxSpinnerModule } from "ngx-spinner";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import {
  getAnalytics,
  provideAnalytics,
  ScreenTrackingService,
  UserTrackingService,
} from "@angular/fire/analytics";
import { getPerformance, providePerformance } from "@angular/fire/performance";
import { LocationStrategy, PathLocationStrategy } from "@angular/common";
import { FullCalendarModule } from "@fullcalendar/angular"; // must go before plugins

declare global {
  // eslint-disable-next-line no-var
  var FIREBASE_APPCHECK_DEBUG_TOKEN: boolean | string | undefined;
}
if (!environment.production) {
  self.FIREBASE_APPCHECK_DEBUG_TOKEN = environment.appCheckDebug; // set to <debugToken> that registered with App-Check in Firebase Console
}
@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserAnimationsModule,
    BrowserModule,
    NgbModule,
    FormsModule,
    RouterModule,
    AppRoutingModule,
    SharedModule,
    CoreModule,
    NgxSpinnerModule,
    FullCalendarModule,
    provideFirebaseApp(() => initializeApp(environment.firebaseConfig)),
    provideFirestore(() => {
      let firestore: Firestore;
      if (!environment.production) {
        firestore = getFirestore(getApp());
        connectFirestoreEmulator(firestore, "localhost", 8089);
      } else {
        firestore = initializeFirestore(getApp(), {
          localCache: persistentLocalCache({
            tabManager: persistentMultipleTabManager(),
          }),
          experimentalAutoDetectLongPolling: true,
          experimentalLongPollingOptions: {
            timeoutSeconds: 30,
          },
        });
      }
      return firestore;
    }),
    provideAuth(() => {
      const auth = getAuth();
      if (!environment.production) {
        connectAuthEmulator(auth, "http://localhost:9099", {
          disableWarnings: true,
        });
      }
      return auth;
    }),
    providePerformance(() => getPerformance(getApp())),
    provideAppCheck(() =>
      initializeAppCheck(getApp(), {
        provider: new ReCaptchaEnterpriseProvider(environment.recaptchaSiteKey),
        isTokenAutoRefreshEnabled: true,
      })
    ),
    provideAnalytics(() => getAnalytics(getApp())),
  ],
  providers: [
    ScreenTrackingService,
    UserTrackingService,
    { provide: LocationStrategy, useClass: PathLocationStrategy },
    {
      provide: APP_ID,
      useValue: "serverApp",
    },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

//// This Service would be a non singleton instance since it is used by multiple list modules and data has to be fresh for each module
//// Hence, its not provided through Service module, but rather its provided through individual list components
import { Injectable, OnDestroy, inject } from "@angular/core";
import { WhereFilterOp } from "@firebase/firestore-types";
import { Subject } from "rxjs";
import { takeUntil, map } from "rxjs/operators";
import { NgxSpinnerService } from "ngx-spinner";
import {
  collection,
  query,
  Query,
  where,
  documentId,
  orderBy,
  limit,
  startAfter,
  DocumentSnapshot,
  CollectionReference,
  collectionSnapshots,
  Firestore,
} from "@angular/fire/firestore";
import { traceUntilFirst } from "@angular/fire/performance";
@Injectable({
  providedIn: "any",
})
export class LazyloadService<T> implements OnDestroy {
  tableData: T[] = [];
  where: { key: string; op: WhereFilterOp; value: string | string[] }[] | null =
    [];
  limit = 10;
  collection = "";
  dataLoading = false;
  doneLoading = false;
  spinnerName = "pageLoader";
  // save last document in snapshot of items received
  private lastInResponse: DocumentSnapshot<T> | any;
  // keep the array of first document of previous pages
  private prev_strt_at: DocumentSnapshot<T>[] = [];
  subs$: Subject<void> = new Subject<void>();
  private firestore: Firestore = inject(Firestore);
  private spinnerService: NgxSpinnerService = inject(NgxSpinnerService);

  loadItems({ isReset = false, isNext = false }) {
    if (isReset) {
      this.dataLoading = false;
      this.doneLoading = false;
      this.tableData = [];
      this.spinnerName = "pageLoader";
    }
    if (this.doneLoading) {
      this.spinnerService.hide("pageLoader");
      this.spinnerService.hide("contentLoader");
    }
    if (this.dataLoading || this.doneLoading) {
      return;
    }
    this.spinnerService.show(this.spinnerName);
    this.dataLoading = true;
    const collectionRef = collection(this.firestore, this.collection);
    const q = this.createQueryRef(collectionRef, isNext);
    return collectionSnapshots(q).pipe(
      traceUntilFirst(this.collection),
      takeUntil(this.subs$),
      map((response) => {
        this.doneLoading = response.length === 0;
        this.spinnerService.hide(this.spinnerName);
        this.lastInResponse = response[response?.length - 1];
        this.push_prev_startAt(this.lastInResponse);
        response.forEach((record) => {
          // Avoid pushing duplicates
          if (
            this.tableData.filter((item: any) => item["id"] === record?.id)
              .length <= 0
          ) {
            this.tableData.push({
              ...(record?.data() as T),
              id: record?.id,
            });
          }
        });
        this.dataLoading = false;
        return;
      })
    );
  }

  private createQueryRef(ref: CollectionReference, isNext: boolean): Query {
    let queryRef: Query;
    let orderByKey: any = "modifiedDate";
    let order: any = "desc";
    const conditions: any = [];
    if (this.where) {
      this.where.forEach((condition, index) => {
        const key = condition.key === "id" ? documentId() : condition.key;
        if (index === 0 && !condition.key?.includes(".")) {
          orderByKey = key;
          order = condition.key === "id" ? "asc" : "desc";
        } else if (condition.key?.includes(".")) {
          orderByKey = documentId();
        }
        if (condition.value instanceof Array) {
          condition.value = condition.value.splice(0, 10);
        }
        conditions.push(where(key, condition?.op, condition?.value));
      });
    }
    conditions.push(limit(this.limit));
    if (orderByKey !== "date") {
      conditions.push(orderBy(orderByKey, order));
    }
    if (isNext && this.lastInResponse) {
      conditions.push(startAfter(this.lastInResponse));
    }
    queryRef = query(ref, ...conditions);
    return queryRef;
  }

  push_prev_startAt(prev_first_doc: DocumentSnapshot<T>) {
    this.prev_strt_at.push(prev_first_doc);
  }

  ngOnDestroy() {
    this.subs$.next();
    this.subs$.complete();
  }
}

"overrides": {
    "@angular/fire@^7.6.1": {
      "rxfire@^6.0.0": "6.0.3"
    }
  }