Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
oluijks opened this issue Aug 29, 2023 · 46 comments

Comments

@oluijks
Copy link

oluijks commented Aug 29, 2023

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
Copy link

jits commented Aug 29, 2023

@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
Copy link
Author

oluijks commented Aug 29, 2023

@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
Copy link

jits commented Aug 29, 2023

@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
Copy link
Author

oluijks commented Aug 29, 2023

@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
Copy link

jits commented Aug 29, 2023

@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
Copy link
Author

oluijks commented Aug 29, 2023

@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
Copy link

jits commented Aug 29, 2023

@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
Copy link
Author

oluijks commented Aug 29, 2023

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

@oluijks oluijks closed this as completed Aug 29, 2023
@Tucaen
Copy link

Tucaen commented Aug 30, 2023

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
Copy link

timlouw commented Aug 31, 2023

@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';

image

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
Copy link
Author

oluijks commented Aug 31, 2023

@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
Copy link

jits commented Aug 31, 2023

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

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
Copy link

jits commented Aug 31, 2023

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
Copy link

timlouw commented Aug 31, 2023

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
Copy link

Tucaen commented Aug 31, 2023

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
Copy link

timlouw commented Aug 31, 2023

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

@oluijks
Copy link
Author

oluijks commented Aug 31, 2023

Reopening this issue

@oluijks oluijks reopened this Aug 31, 2023
@Alab1
Copy link

Alab1 commented Aug 31, 2023

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

@davideast
Copy link
Member

@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
Copy link

jits commented Sep 1, 2023

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

@Sapython
Copy link

Sapython commented Sep 4, 2023

I tried the canary build the results are same as before.
Screenshot 2023-09-04 at 7 09 51 AM

My angular fire version

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

@taylorgibb
Copy link

I am running into this as well

@igoraugustynski
Copy link

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
Copy link
Member

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

@taylorgibb
Copy link

taylorgibb commented Sep 5, 2023

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
Copy link

shaictal commented Sep 5, 2023

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
Copy link

@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
Copy link

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

image

I am using ionic angular by the way
image

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
Copy link

mdroz8 commented Sep 19, 2023

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

when will angularFire release be out that supports firebase 10?

@farzinGhaheri
Copy link

farzinGhaheri commented Sep 19, 2023

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

image

@ossmossdev
Copy link

ossmossdev commented Sep 20, 2023

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

image

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

image

@farzinGhaheri
Copy link

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

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

image

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

image

@brijeshpthankachan
Copy link

brijeshpthankachan commented Sep 22, 2023

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
Copy link

@ossmossdev What is your npm and node version?

@brijeshpthankachan
Copy link

brijeshpthankachan commented Sep 24, 2023

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
Copy link

ot working, still g

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

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
image

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

image

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
Copy link

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
Copy link

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
Copy link

alcaidio commented Sep 29, 2023

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
Copy link

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

@lucagerotto
Copy link

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
Copy link

"rxfire": "6.0.3"

#3422 (comment)

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
Copy link

rgant commented Oct 17, 2023

Overrides setup that resolves this issue: FirebaseExtended/rxfire#88 (comment)

@pkitatta
Copy link

pkitatta commented Nov 1, 2023

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
Copy link

woutersteven commented Nov 1, 2023

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
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests