angularfire: Angular Standalone (v16.2.0) & Angular Fire (v7.6.1) - error on calling `collection` function

Just ran into the same issue after following the instructions in the Quickstart But I guess it’s due to the version mismatch you mentioned

(and, for now, Firebase v10 is not compatible with the latest AngularFire stable release – there is a new AngularFire release coming that will support the latest v10)

I am using “@angular/fire”: “^7.6.1”, “firebase”: “^10.3.0”, “@angular/core”: “^16.2.0”,

this setup worked for me

{
...
  "dependencies": {
   ...
    "@angular/fire": "^7.6.1",
    "firebase": "^9.23.0", // forcing below 10
    ...
  },
  "devDependencies": {
    "rxfire": "6.0.3" // force a version lower than 6.0.4
  }
}

I was able to get it working by deleting the package-lock.json file and the node_modules directory. Then, I installed the following versions:

    ...
    "@angular/fire": "7.6.1",
    "firebase": "^10.4.0",
    "rxfire": "6.0.4"
    ...

It’s now working for Angular 15, 16, and Ionic 7."

I use npm And I also think that the problem is with rxfire v6.0.4.

You have to remove the ^ in front of the version of rxfire in your package.json The ^ allows the package-manager to install the newest version for the given major version (= last two numbers can be changed) Using ~ would only allow changes to the minor version (= last number can be changed) But we don’t want any change.

I think reopening the ticket would be good, since more people will run into this problem, until there is a new version of angular/fire, which supports firebase v10

@oluijks @jits I have also ran into this issue now - we can possibly open this issue again. I found the only change necessary to fix the issue was to change where collection is imported from.

Importing like this results in the console error mentioned above:

import { Firestore, collectionData, collection } from ‘@angular/fire/firestore’;

Changing the imports to this fixes the console error and data is fetched like expected:

import { Firestore, collectionData } from ‘@angular/fire/firestore’; import { collection } from ‘firebase/firestore’;

I guess there is an issue with collection when it is imported from @angular/fire/firestore

Just as a side note - the same outcome happens when I am on the following two sets of package versions so it seems to still be an issue in the lastest canary version as well as the latest release version:

“@angular/fire”: “^7.6.1”, “firebase”: “^9.23.0”, “rxfire”: “^6.0.3”,

and

“@angular/fire”: “^16.0.0-canary.4172abd”, “firebase”: “^10.0.0”, “rxfire”: “^6.0.4”,

@oluijks – what are your import statements?

This may be relevant: https://stackoverflow.com/a/69048162/238287

One thing I’ve noticed: it’s important to always import functions from '@angular/fire/firestore' and not from rxfire or the Firebase JS SDK directly, otherwise weird things happen.

@jits RxFire’s collection() function was named well before the version 9 SDK and we didn’t want to cause a breaking change.

I just published a version of RxFire 6.0.5 that fixes the dependency range for the Firebase SDK. I also pushed a new canary of AngularFire. Can someone try the latest canary after deleting all node modules and trying again?

Same issue with Angular 16.2.0 and Firebase v10+, solved with “@angular/fire”: “^7.6.1”, “firebase”: “^9.23.0”, “rxfire”: “6.0.3”

I can confirm the issue. What worked for me was:

"@angular/fire": "^7.6.1",
"firebase": "^9.23.0",
"rxfire": "^6.0.3",

Any other configuration throws build or runtime errors.

Reopening this issue

@timlouw I can confirm that importing collection from firebase/firestore fixes the mentioned FirebaseError. I’m not sure if this will raise other issues though…

@jits Ok to open up this issue again now we know a bit more? I think the angularfire team has enough info to look at this issue…

I just followed the official AngularFire Quickstart, but as soon as I installed AngularFire (using npm), the app can not compile anymore : Generic type 'AggregateQuerySnapshot<T>' requires 1 type argument(s).

Few weeks earlier, I could install AngularFire but I got the following error : Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore

What I understrand in this topic, is that these errors come from an incompatibility between AngularFire and the new major version Firebase 10. Am I correct ?

I’m also understranding that the AngularFire team is aware and working on a fix?

I was using yarn to install the packages previously and doesn’t matter the combination of versions of angular fire and firebase, the issue persisted.

Now I did an npm install and everything works

I have faced the same issue, tried to install different version of AngularFire, Rxfire and Firebase, yet getting errors.

I tried the canary build the results are same as before.

My angular fire version

Project@0.0.1 /Users/*******/Documents/GitHub/ProjectName
└── @angular/fire@16.0.0-canary.5793d6f

thanks for your comments guys and fixes… 3 days I m turning this problem in EVERY directions 😃

My apologies, you are correct @jits @Tucaen - I double checked the versions installed in the package-lock.

@jits Will do. I’ll close it for now and again, thanks for the help.