My custom class that wraps Angular Firestore is designed to be extended and used throughout my application. However, after updating to Angular 9, this setup no longer functions properly. For the complete code snippet, visit .
The abstract class wrapper:
import { Inject } from '@angular/core';
import { AngularFirestore, QueryFn } from '@angular/fire/firestore';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
import { environment } from 'src/environments/environment';
export abstract class FirestoreService<T> {
protected abstract basePath: string;
constructor(
@Inject(AngularFirestore) protected firestore: AngularFirestore,
) {
}
collection$(queryFn?: QueryFn): Observable<T[]> {
return this.firestore.collection<T>(`${this.basePath}`, queryFn).valueChanges().pipe(
tap(r => {
if (!environment.production) {
console.groupCollapsed(`Firestore Streaming [${this.basePath}] [collection$]`);
console.table(r);
console.groupEnd();
}
}),
);
}
}
This class is then extended in:
import { Injectable } from '@angular/core';
import { FirestoreService } from 'src/app/core/services/firestore.service';
import { Employee } from '../models/employee';
@Injectable({
providedIn: 'root'
})
export class EmployeeFirestore extends FirestoreService<Employee> {
protected basePath: string = 'employees';
}
And injected in:
import { EmployeesPageStore } from './employees-page.store';
import { EmployeeFirestore } from './employee.firestore';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Employee } from '../models/employee';
import { tap, map } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class EmployeesService {
constructor(
private firestore: EmployeeFirestore,
private store: EmployeesPageStore
) {
this.firestore.collection$().pipe(
tap(employees => {
this.store.patch({
loading: false,
employees,
totalEmployees: employees.length,
totalDrivers: employees.filter(employee => employee.hasDriverLicense).length,
totalRosarioEmployees: employees.filter(employee => employee.location === 'Rosario').length,
}, `employees collection subscription`);
})
).subscribe();
}
While this setup works fine in Angular 8, it throws an error (shown in developer tools) in Angular 9:
ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'collection' of undefined
TypeError: Cannot read property 'collection' of undefined
at EmployeeFirestore.collection$ (firestore.service.ts:30)
at new EmployeesService (employees.service.ts:17)
at Object.EmployeesService_Factory [as factory] (employees.service.ts:119)
at R3Injector.hydrate (core.js:16765)
at R3Injector.get (core.js:16526)
at NgModuleRef$1.get (core.js:35567)
at Object.get (core.js:33358)
at getOrCreateInjectable (core.js:5470)
at Module.ɵɵdirectiveInject (core.js:20777)
at NodeInjectorFactory.EmployeesSummaryComponent_Factory [as factory] (employees-summary.component.ts:10)
at resolvePromise (zone-evergreen.js:793)
at resolvePromise (zone-evergreen.js:752)
at zone-evergreen.js:854
at ZoneDelegate.invokeTask (zone-evergreen.js:400)
at Object.onInvokeTask (core.js:40772)
at ZoneDelegate.invokeTask (zone-evergreen.js:399)
at Zone.runTask (zone-evergreen.js:168)
at drainMicroTaskQueue (zone-evergreen.js:570)
at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:485)
at invokeTask (zone-evergreen.js:1596)