-
Notifications
You must be signed in to change notification settings - Fork 2.2k
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
Comments
@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 |
@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' |
@oluijks – thanks for clarifying. What are your import statements for 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 ( |
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 |
@oluijks – looks like that StackBlitz example works (at least, on my end). Side note: I believe |
@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? |
@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. |
@jits Will do. I'll close it for now and again, thanks for the help. |
Just ran into the same issue after following the instructions in the Quickstart
I am using "@angular/fire": "^7.6.1", "firebase": "^10.3.0", "@angular/core": "^16.2.0", this setup worked for me
|
@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:
Changing the imports to this fixes the console error and data is fetched like expected:
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:
and
|
@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:
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 |
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? |
I use npm You have to remove the ^ in front of the version of rxfire in your package.json 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 |
Reopening this issue |
thanks for your comments guys and fixes... 3 days I m turning this problem in EVERY directions :) |
@jits RxFire's I just published a version of RxFire |
@davideast – ahhh that makes sense. Thanks for clarifying. |
I am running into this as well |
I can confirm the issue. What worked for me was:
Any other configuration throws build or runtime errors. |
@taylorgibb @Sapython Can you show me the resolved version of Firebase, RxFire, and AngularFire in your projects? |
Hi @davideast i managed to resolve this by doing the following.
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. |
same issue here, if you are using yarn, you can enforce a package version (for dependencies) by setting: "dependencies": { |
link not working |
when will angularFire release be out that supports firebase 10? |
try this one. this works for me "@angular/fire": "^7.6.1", delete the node modules and package.lock.json then run npm i this works on my ionic 7 angular 16 |
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
for ionic 7 angular 15 project |
@ossmossdev What is your npm and node version? |
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:
It's now working for Angular 15, 16, and Ionic 7." |
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 just followed the official AngularFire Quickstart, but as soon as I installed AngularFire (using npm), the app can not compile anymore : Few weeks earlier, I could install AngularFire but I got the following error : 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? |
Same issue for me in standalone app. Angular CLI: 16.0.6 Angular: 16.2.6 Package Version@angular-devkit/architect 0.1602.3 🥲 Another question? There's a reason why angular/fire schematics install firebase-tools not in dev dependencies ? |
Same issue when using Firebase v10+, downgrading to Firebase v9.23 resolves the issue for now. |
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" |
Man, I wish I had seen your answer 2 days ago. |
Overrides setup that resolves this issue: FirebaseExtended/rxfire#88 (comment) |
Downgrading firebase to |
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. |
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. |
Version info
Angular:
Firebase:
AngularFire:
How to reproduce these conditions
Steps to set up and reproduce
In app.config.ts:
In component:
Debug output
** Errors in the JavaScript console **
console.log(this.firestore)
Expected behavior
Get a result from firestore
Actual behavior
Error in console
The text was updated successfully, but these errors were encountered: