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

oluijks commented 12 months ago

Version info

Angular:

Angular CLI: 16.2.0
Node: 18.17.0
Package Manager: npm 9.8.1
OS: darwin x64

Angular: 16.2.2
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1602.0
@angular-devkit/build-angular   16.2.0
@angular-devkit/core            16.2.0
@angular-devkit/schematics      16.2.0
@angular/cli                    16.2.0
@angular/fire                   7.6.1
@schematics/angular             16.2.0
rxjs                            7.8.1
typescript                      5.1.6
zone.js                         0.13.1

Firebase:

npm list firebase         
website@0.0.1/Volumes/Develop/GitHub/*****/website
└─ firebase@9.23.0

AngularFire:

> npm list @angular/fire               
website@0.0.1 /Volumes/Develop/GitHub/*****/website
└── @angular/fire@7.6.1

How to reproduce these conditions

> npx @angular/cli@latest new website --routing --standalone
> ng add @angular/fire

Steps to set up and reproduce

In app.config.ts:

...
provideFirebaseApp(() => initializeApp(environment.firebase)),
  provideFirestore(() => getFirestore()),
  provideAuth(() => getAuth()),
)
...

In component:

...
firestore: Firestore = inject(Firestore)
items$: Observable<any[]> | undefined

ngOnInit() {
  const aCollection = collection(this.firestore, 'faqs')
  this.items$ = collectionData(aCollection) as Observable<any[]>
}
...

Debug output

Errors in the JavaScript console

ERROR FirebaseError: 
Expected first argument to collection() to be a 
CollectionReference, a DocumentReference or FirebaseFirestore

console.log(this.firestore)

{
    "app": {
        "_isDeleted": false,
        "_options": {
            "projectId": "*****",
            "appId": "*****",
            "storageBucket": "*****",
            "apiKey": "*****",
            "authDomain": "*****",
            "messagingSenderId": "*****",
            "measurementId": "*****"
        },
        "_config": {
            "name": "[DEFAULT]",
            "automaticDataCollectionEnabled": false
        },
        "_name": "[DEFAULT]",
        "_automaticDataCollectionEnabled": false,
        "_container": {
            "name": "[DEFAULT]",
            "providers": {}
        }
    },
    "databaseId": {
        "projectId": "*****",
        "database": "(default)"
    },
    "settings": {
        "host": "firestore.googleapis.com",
        "ssl": true,
        "ignoreUndefinedProperties": false,
        "cacheSizeBytes": 41943040,
        "experimentalForceLongPolling": false,
        "experimentalAutoDetectLongPolling": true,
        "experimentalLongPollingOptions": {},
        "useFetchStreams": true
    }
}

Expected behavior

Get a result from firestore

Actual behavior

Error in console

jits commented 12 months ago

@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.

oluijks commented 12 months ago

@jits Thanks for your reply. I've seen that post but I'm using the correct imports. I just followed the examples from angular/fire itself...

import {initializeApp, provideFirebaseApp} from '@angular/fire/app'
import {getAuth, provideAuth} from '@angular/fire/auth'
import {getFirestore, provideFirestore} from '@angular/fire/firestore'

jits commented 12 months ago

@oluijks – thanks for clarifying. What are your import statements for collection and collectionData? These should also be coming from '@angular/fire/firestore'.

Also, instead of:

 const aCollection = collection(this.firestore, '/faqs')

… could you try:

const aCollection = collection(this.firestore, 'faqs')

Note the removal of the forward slash ('/') (it's a small thing, and I'm not sure if it will actually make a difference, given the error message, but it may be worth trying anyway).

oluijks commented 12 months ago

@jits

The imports for collection and collectionData:

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

I've recreated this on StackBlitz, same error (it would mean a lot if you could have a look at it)

https://stackblitz.com/edit/stackblitz-starters-d1xcgg?file=src%2Fapp%2Fapp.component.ts

jits commented 12 months ago

@oluijks – looks like that StackBlitz example works (at least, on my end).

Screenshot 2023-08-29 at 11 37 31

Side note: I believe firebase needs to be added to the dependencies in package.json (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).

oluijks commented 12 months ago

@jits Thats weird I thought StackBlitz was supposed to give everybody the same results 🤪

Ok thanks for helping out. Ya think I should close this issue?

jits commented 12 months ago

@oluijks – weird indeed! I think, if it's possible to reproduce this issue consistently then it's worth keeping it open. Otherwise, best to close for now and reopen if it comes up again.

oluijks commented 12 months ago

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

Tucaen commented 12 months ago

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
  }
}

timlouw commented 11 months ago

@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 commented 11 months ago

@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...

jits commented 11 months ago

@oluijks, @timlouw – note, I'm not associated with the angularfire team in any way – just a random internet stranger trying to help out 😄

I'm not encountering this issue in an app of mine:

Yarn v1
package.json defines:
- "@angular/fire": "^7.6.1"
- "firebase": "^9.23.0"
Actual resolved versions in yarn.lock:
- @angular/fire = 7.6.1
- firebase = 9.23.0
- rxfire = 6.0.3
- ALL my firestore related imports are from '@angular/fire/firestore' directly.
- And my usage of collectionData (and collection, to build the ref) works okay.

Digging into this a little bit:

The collectionData function in angularfire is just the relevant function re-exported from rxfire but zone wrapped.
The collection function in angularfire is just the relevant function re-exported from 'firebase/firestore' but zone wrapped.
Though weirdly, there's also an export * from 'firebase/firestore'; in angularfire, which could cause conflicts.
My suspicion: somehow, an incorrect collection is being imported. For example, rxfire (confusingly) has a collection function that angularfire renames and re-exports to collectionData (see first bullet point in this list). In VSCode, if you click through to the definition of collection after importing it from @angular/fire/firestore then it will show you where it comes from.

Without a Stackblitz etc. to consistently reproduce this I'm not sure how best to debug this further.

Side note: I would highly recommend not importing anything directly from 'firebase/firestore' or rxfire as I experienced weird behaviours when I did this (probably due to not being zone wrapped). Though I appreciate that this seems to be the only solution for those experiencing this issue.

jits commented 11 months ago

Reading @Tucaen's comment, above, I think this is related to the latest rxfire v6.0.4, which I think has a peer dependency to Firebase v10, which could be the reason why folks are experiencing this particular issue (and it seems, with npm, rather than yarn).

timlouw commented 11 months ago

Reading @Tucaen's comment, above, I think this is related to the latest rxfire v6.0.4, which I think has a peer dependency to Firebase v10, which could be the reason why folks are experiencing this particular issue (and it seems, with npm, rather than yarn).

As I said in my post I tested this on both rxfire 6.0.3 and 6.0.4 and then with firebase 9.23.0 and 10.0.0 and I get the same error on both sets of versions. If you aren't experiencing the problem but are using yarn then that could be part of it - I was using npm.

@Tucaen Would you be able to confirm if you used yarn or npm? @oluijks I think its safe to reopen this issue, otherwise I could create a new issue but I think it would be ideal if you reopen.

Tucaen commented 11 months ago

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

timlouw commented 11 months ago

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

oluijks commented 11 months ago

Reopening this issue

Alab1 commented 11 months ago

thanks for your comments guys and fixes... 3 days I m turning this problem in EVERY directions :)

davideast commented 11 months ago

@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?

jits commented 11 months ago

@davideast – ahhh that makes sense. Thanks for clarifying.

Sapython commented 11 months ago

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

taylorgibb commented 11 months ago

I am running into this as well

igoraugustynski commented 11 months ago

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.

davideast commented 11 months ago

@taylorgibb @Sapython Can you show me the resolved version of Firebase, RxFire, and AngularFire in your projects?

taylorgibb commented 11 months ago

Hi @davideast i managed to resolve this by doing the following.

Delete node_modules
Delete yarn.lock
Uninstall angular-fire
Npm install
Specify rxfire 6.0.3 as a devDep
Re-add angular fire dependency, resolved version is 7.6.1

I was using yarn before but i couldnt get it to work. Works perfectly if i use npm. I am honestly not sure why. I tried with firebase, must be a dependency resolution issue, but i didnt get around to digging much deeper.

EDIT: just an update on this, ran into this on a second project. This time i checked resolved versions, even when specifying rxfire 6.0.3 yarn would say it has an unmet peer dependency and then my yarn.lock would have rxfire 6.0.3 and 6.0.5, when i specified 6.0.3 as a devDep and used NPM instead it worked, once again.

shaictal commented 11 months ago

same issue here, if you are using yarn, you can enforce a package version (for dependencies) by setting:

"dependencies": { ... }, "devDependencies": { ... }, "resolutions": { "**/rxfire": "6.0.3" }

Mohindharan commented 11 months ago

@jits

The imports for collection and collectionData:
import { Firestore, collection, collectionData } from '@angular/fire/firestore';
I've recreated this on StackBlitz, same error (it would mean a lot if you could have a look at it)

https://stackblitz.com/edit/stackblitz-starters-d1xcgg?file=src%2Fapp%2Fapp.component.ts

link not working

ossmossdev commented 11 months ago

I also have the same issue but when i try to run

npm i @angular/fire@latest firebase@latest rxfire@latest

issues are gone during build

But on browser console

I am using ionic angular by the way

here is package.json "dependencies": { "@angular-slider/ngx-slider": "^2.0.4", "@angular/animations": "^16.0.0", "@angular/cdk": "^16.2.3", "@angular/common": "^16.0.0", "@angular/compiler": "^16.0.0", "@angular/core": "^16.0.0", "@angular/fire": "^7.6.1", "@angular/forms": "^16.0.0", "@angular/platform-browser": "^16.0.0", "@angular/platform-browser-dynamic": "^16.0.0", "@angular/router": "^16.0.0", "@angular/service-worker": "^16.2.4", "@capacitor/android": "5.3.0", "@capacitor/app": "5.0.6", "@capacitor/camera": "^5.0.7", "@capacitor/core": "5.3.0", "@capacitor/haptics": "5.0.6", "@capacitor/keyboard": "5.0.6", "@capacitor/status-bar": "5.0.6", "@firebase/remote-config": "^0.4.4", "@fortawesome/angular-fontawesome": "^0.13.0", "@fortawesome/fontawesome-svg-core": "^6.4.2", "@fortawesome/free-brands-svg-icons": "^6.4.2", "@fortawesome/free-regular-svg-icons": "^6.4.2", "@fortawesome/free-solid-svg-icons": "^6.4.2", "@ionic/angular": "^7.0.0", "@ionic/pwa-elements": "^3.2.2", "@ionic/storage-angular": "^4.0.0", "@spiderbox/ngx-datatable": "^20.1.0", "@swimlane/ngx-datatable": "^20.1.0", "bthrust-thermal-printer-cordova-plugin": "^1.0.9", "firebase": "^10.3.1", "ionicons": "^7.0.0", "localforage-cordovasqlitedriver": "^1.8.0", "lodash-es": "^4.17.21", "md5-typescript": "^1.0.5", "moment": "^2.29.4", "ngx-device-detector": "^6.0.2", "ngx-slider-v2": "^16.0.2", "rxfire": "^6.0.5", "rxjs": "~7.8.0", "swiper": "^6.8.4", "thermal-printer-cordova-plugin": "^1.0.6", "tslib": "^2.3.0", "zone.js": "~0.13.0" }, "devDependencies": { "@angular-devkit/build-angular": "^16.0.0", "@angular-eslint/builder": "^16.0.0", "@angular-eslint/eslint-plugin": "^16.0.0", "@angular-eslint/eslint-plugin-template": "^16.0.0", "@angular-eslint/schematics": "^16.0.0", "@angular-eslint/template-parser": "^16.0.0", "@angular/cli": "^16.0.0", "@angular/compiler": "^16.0.0", "@angular/compiler-cli": "^16.0.0", "@angular/language-service": "^16.0.0", "@capacitor/cli": "5.3.0", "@ionic/angular-toolkit": "^9.0.0", "@types/jasmine": "~4.3.0", "@types/node": "^12.11.1", "@typescript-eslint/eslint-plugin": "5.3.0", "@typescript-eslint/parser": "5.3.0", "eslint": "^7.26.0", "eslint-plugin-import": "2.22.1", "eslint-plugin-jsdoc": "30.7.6", "eslint-plugin-prefer-arrow": "1.2.2", "jasmine-core": "~4.6.0", "jasmine-spec-reporter": "~5.0.0", "karma": "~6.4.0", "karma-chrome-launcher": "~3.2.0", "karma-coverage": "~2.2.0", "karma-coverage-istanbul-reporter": "~3.0.2", "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "~2.0.0", "ts-node": "^8.3.0", "typescript": "~5.0.2" },

mdroz8 commented 11 months ago

@oluijks – looks like that StackBlitz example works (at least, on my end).

Side note: I believe firebase needs to be added to the dependencies in package.json (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).

when will angularFire release be out that supports firebase 10?

farzinGhaheri commented 11 months ago

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

ossmossdev commented 11 months ago

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

try this one. this works for me

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

delete the node modules and package.lock.json run npm cache clean --force. npm cache verify.

then run npm i

this works on my ionic 7 angular 16

farzinGhaheri commented 11 months ago

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

try this one. this works for me

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

delete the node modules and package.lock.json run npm cache clean --force. npm cache verify.

then run npm i

this works on my ionic 7 angular 16

Thanks for your solution, but it is not working, still getting same error

brijeshpthankachan commented 11 months ago

Using these configurations

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

and

    "@angular/fire": "^7.6.1",
    "firebase": "^9.12.1",

gives the error

Error: node_modules/rxfire/firestore/lite/interfaces.d.ts:8:29 - error TS2314: Generic type 'AggregateQuerySnapshot<T>' requires 1 type argument(s).

export type CountSnapshot = lite.AggregateQuerySnapshot<{       
count: lite.AggregateField<number>;
}, any, DocumentData>;

 Failed to compile.

for ionic 7 angular 15 project

Jurgensvds commented 11 months ago

@ossmossdev What is your npm and node version?

brijeshpthankachan commented 11 months ago

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."

ossmossdev commented 11 months ago

ot working, still g

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

try this one. this works for me "@angular/fire": "^7.6.1", "firebase": "9.12.1", "rxfire": "6.0.3", delete the node modules and package.lock.json run npm cache clean --force. npm cache verify. then run npm i this works on my ionic 7 angular 16

Thanks for your solution, but it is not working, still getting same error

downgrade your rxfire to 6.0.3

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

remove the "^"

npm i rxfire@6.0.3

lucianobrunet commented 11 months ago

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

CharlieDebuyser commented 11 months ago

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?

alcaidio commented 11 months ago

Same issue for me in standalone app.

Angular CLI: 16.0.6 Node: 16.15.0 Package Manager: npm 8.5.5 OS: darwin x64

Angular: 16.2.6 ... animations, common, compiler, compiler-cli, core, forms ... platform-browser, platform-browser-dynamic, platform-server ... router

Package Version

@angular-devkit/architect 0.1602.3 @angular-devkit/build-angular 16.2.3 @angular-devkit/core 16.2.3 @angular-devkit/schematics 16.0.6 @angular/cdk 16.2.5 @angular/cli 16.0.6 @angular/fire 7.6.1 @nguniversal/builders 16.2.0 @nguniversal/express-engine 16.2.0 @schematics/angular 16.0.6 rxjs 7.8.1 typescript 5.0.4

🥲

Another question? There's a reason why angular/fire schematics install firebase-tools not in dev dependencies ?

woutersteven commented 10 months ago

Same issue when using Firebase v10+, downgrading to Firebase v9.23 resolves the issue for now.

lucagerotto commented 10 months ago

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"

sakr2000 commented 10 months ago

"rxfire": "6.0.3"

https://github.com/angular/angularfire/issues/3422#issuecomment-1699059489

Man, I wish I had seen your answer 2 days ago. it would have saved me a lot of time and mental energy. thnx a lot.

rgant commented 10 months ago

Overrides setup that resolves this issue: https://github.com/FirebaseExtended/rxfire/issues/88#issuecomment-1715851191

pkitatta commented 9 months ago

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.

Downgrading firebase to 9.23.0 did the trick. Thanks a lot. Spent a few days trying to figure out the issue.

woutersteven commented 9 months ago

I'm currently using Firebase 10.5.2 and AngularFire v16 and the issues i had seem to have mostly resolved. I'm still testing with AngularFire 16 though. If i find anything I will update it here.

This is not a typo, AngularFire changed their versioning to match the major Angular version.

jakehockey10 commented 8 months ago

Angular Fire 17 was released about 18 hours ago, worth giving this another shot. I've had to comment out the Analytics and Performance features, unfortunately, but everything else seems to be working just fine.

angular / angularfire