Angular v15 support

Version info

Angular: 15.0.0

Firebase: 9.14.0

AngularFire: 7.4.1

Node: v16.18.1

NPM: 8.19.2

Operating system: macOS

How to reproduce these conditions

Failing test unit, Stackblitz demonstrating the problem

Steps to set up and reproduce

1. Angular version upgraded v14 to v15. (blank project)
2. ng add @angular/fire
3. ng serve

Sample data and security rules

Debug output

Error: node_modules/@angular/fire/compat/firestore/interfaces.d.ts:13:18 - error TS2430: Interface ‘DocumentSnapshotExists<T>’ incorrectly extends interface ‘DocumentSnapshot<DocumentData>’. The types returned by ‘data(…)’ are incompatible between these types. Type ‘T’ is not assignable to type ‘DocumentData | undefined’. Type ‘T’ is not assignable to type ‘DocumentData’.

13 export interface DocumentSnapshotExists<T> extends firebase.firestore.DocumentSnapshot { ~~~~~~~~~~~~~~~~~~~~~~

node_modules/@angular/fire/compat/firestore/interfaces.d.ts:13:41 13 export interface DocumentSnapshotExists<T> extends firebase.firestore.DocumentSnapshot { ~ This type parameter might need an extends firebase.firestore.DocumentData constraint. node_modules/@angular/fire/compat/firestore/interfaces.d.ts:13:41 13 export interface DocumentSnapshotExists<T> extends firebase.firestore.DocumentSnapshot { ~ This type parameter might need an extends firebase.firestore.DocumentData | undefined constraint.

Error: node_modules/@angular/fire/compat/firestore/interfaces.d.ts:23:18 - error TS2430: Interface ‘QueryDocumentSnapshot<T>’ incorrectly extends interface ‘QueryDocumentSnapshot<DocumentData>’. The types returned by ‘data(…)’ are incompatible between these types. Type ‘T’ is not assignable to type ‘DocumentData’.

23 export interface QueryDocumentSnapshot<T> extends firebase.firestore.QueryDocumentSnapshot { ~~~~~~~~~~~~~~~~~~~~~

node_modules/@angular/fire/compat/firestore/interfaces.d.ts:23:40 23 export interface QueryDocumentSnapshot<T> extends firebase.firestore.QueryDocumentSnapshot { ~ This type parameter might need an extends firebase.firestore.DocumentData constraint.

Error: node_modules/@angular/fire/compat/firestore/interfaces.d.ts:26:18 - error TS2430: Interface ‘QuerySnapshot<T>’ incorrectly extends interface ‘QuerySnapshot<DocumentData>’. Types of property ‘docs’ are incompatible. Type ‘QueryDocumentSnapshot<T>[]’ is not assignable to type ‘QueryDocumentSnapshot<DocumentData>[]’. Type ‘QueryDocumentSnapshot<T>’ is not assignable to type ‘QueryDocumentSnapshot<DocumentData>’. The types returned by ‘data(…)’ are incompatible between these types. Type ‘T’ is not assignable to type ‘DocumentData’.

26 export interface QuerySnapshot<T> extends firebase.firestore.QuerySnapshot { ~~~~~~~~~~~~~

node_modules/@angular/fire/compat/firestore/interfaces.d.ts:26:32 26 export interface QuerySnapshot<T> extends firebase.firestore.QuerySnapshot { ~ This type parameter might need an extends firebase.firestore.DocumentData constraint.

Error: node_modules/@angular/fire/compat/firestore/interfaces.d.ts:29:18 - error TS2430: Interface ‘DocumentChange<T>’ incorrectly extends interface ‘DocumentChange<DocumentData>’. The types returned by ‘doc.data(…)’ are incompatible between these types. Type ‘T’ is not assignable to type ‘DocumentData’.

29 export interface DocumentChange<T> extends firebase.firestore.DocumentChange { ~~~~~~~~~~~~~~

node_modules/@angular/fire/compat/firestore/interfaces.d.ts:29:33 29 export interface DocumentChange<T> extends firebase.firestore.DocumentChange { ~ This type parameter might need an extends firebase.firestore.DocumentData constraint.

** Errors in the JavaScript console **

** Output from firebase.database().enableLogging(true); **

** Screenshots **

Expected behavior

Actual behavior

[le-plaza]

I installed @angular/fire with --force, then went to node_modules/@angular/fire/compat/firestore/interfaces.d.ts

All of this that give errors

Change it to this

Basically just adding <T> at the end. Don’t know if that will work for you but it works for me.

[rgant]

In my experience, nothing gets a developer to mute and then accidentally forget about a ticket faster than a bunch of 👍 posts. Please just react to the ticket and don’t add comments unless they contain useful details for the developers to review.