У меня есть обобщенный c класс, который охватывает Angular Firestore, который я затем печатаю и расширяю для использования в моем приложении. После обновления до Angular 9 эта договоренность больше не работает. Чтобы узнать, где я получил полный код, см. https://www.toptal.com/angular/state-management-in-angular-using-firebase.
Обёртка абстрактного класса:
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();
}
}),
);
}
}
Затем я расширяю его в:
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';
}
Затем введите его в:
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();
}
Как уже говорилось, это прекрасно работает в Angular 8, но дает мне следующую ошибку (в инструментах разработчика) в 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)