Angular v15 support

[aliosmanyuksel]

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' incorrectly extends interface 'DocumentSnapshot'.
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 extends firebase.firestore.DocumentSnapshot {
~~~~~~~~~~~~~~~~~~~~~~

node_modules/@angular/fire/compat/firestore/interfaces.d.ts:13:41
13 export interface DocumentSnapshotExists 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 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' incorrectly extends interface 'QueryDocumentSnapshot'.
The types returned by 'data(...)' are incompatible between these types.
Type 'T' is not assignable to type 'DocumentData'.

23 export interface QueryDocumentSnapshot extends firebase.firestore.QueryDocumentSnapshot {
~~~~~~~~~~~~~~~~~~~~~

node_modules/@angular/fire/compat/firestore/interfaces.d.ts:23:40
23 export interface QueryDocumentSnapshot 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' incorrectly extends interface 'QuerySnapshot'.
Types of property 'docs' are incompatible.
Type 'QueryDocumentSnapshot[]' is not assignable to type 'QueryDocumentSnapshot[]'.
Type 'QueryDocumentSnapshot' is not assignable to type 'QueryDocumentSnapshot'.
The types returned by 'data(...)' are incompatible between these types.
Type 'T' is not assignable to type 'DocumentData'.

26 export interface QuerySnapshot extends firebase.firestore.QuerySnapshot {
~~~~~~~~~~~~~

node_modules/@angular/fire/compat/firestore/interfaces.d.ts:26:32
26 export interface QuerySnapshot 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' incorrectly extends interface 'DocumentChange'.
The types returned by 'doc.data(...)' are incompatible between these types.
Type 'T' is not assignable to type 'DocumentData'.

29 export interface DocumentChange extends firebase.firestore.DocumentChange {
~~~~~~~~~~~~~~

node_modules/@angular/fire/compat/firestore/interfaces.d.ts:29:33
29 export interface DocumentChange 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

[vytautas-pranskunas-]

Having an issue with rxjs compatability. I bet because 15 not supported it instals peer dependency togethwer with rxjs 6.6.7 but angular it self uses: 7.5.0. As you cen see in screenshot, because peers are installed it takes rxjs from inside node_modules

[vadimwe]

+1

[AngularAnt]

It also fails to install on a new project. It tried to install version 0.

PS D:\Projects\VSCode\Angular15\standalone\testproj> ng add @angular/fire
ℹ Using package manager: npm
✔ Found compatible package version: @angular/fire@0.0.0.
✔ Package information loaded.

The package @angular/fire@0.0.0 will be installed and executed.
Would you like to proceed? Yes
✔ Packages successfully installed.
Package "@angular/fire" was found but does not support schematics.
PS D:\Projects\VSCode\Angular15\standalone\testproj>

[wexstorm]

Same here. Would be very nice if you could fix this. I need this feature in an ionic project and cannot upgrade since they use Angular 15.
Thank you very much!

[mudlee]

Plus one

[Maxco10]

+1

[BoltzBit]

+1

[lazar0303]

+1 on new project

[Amanito]

+1

[EmmanuelTejedaS]

+1 I have the same error in a project ionic

[aliosmanyuksel]

@jamesdaniels @davideast

[alangajardo]

I did the following:
npm install @angular/fire --force

then i modified the file at @angular/fire/compat/firestore/interfaces.d.ts and i hace change all DocumentChange to DocumentData.

[RaulGM3]

Beware, @alangajardo because you will not be able to npm isntall anything else. Just did it and couldn't install ng material because of:

The package @angular/material@15.0.0 will be installed and executed.
Would you like to proceed? Yes
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @angular/fire@7.4.1
npm ERR! Found: @angular/common@15.0.0

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 at the end.
Don't know if that will work for you but it works for me.

[bezael]

Plus one