Open oluijks opened 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.
@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 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).
@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
@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).
@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 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
}
}
@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",
@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...
@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:
package.json
defines:
"@angular/fire": "^7.6.1"
"firebase": "^9.23.0"
yarn.lock
:
@angular/fire
= 7.6.1
firebase
= 9.23.0
rxfire
= 6.0.3
'@angular/fire/firestore'
directly.collectionData
(and collection
, to build the ref) works okay.Digging into this a little bit:
collectionData
function in angularfire is just the relevant function re-exported from rxfire but zone wrapped.collection
function in angularfire is just the relevant function re-exported from 'firebase/firestore' but zone wrapped.export * from 'firebase/firestore';
in angularfire, which could cause conflicts.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.
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).
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.
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
My apologies, you are correct @jits @Tucaen - I double checked the versions installed in the package-lock.
Reopening this issue
thanks for your comments guys and fixes... 3 days I m turning this problem in EVERY directions :)
@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?
@davideast – ahhh that makes sense. Thanks for clarifying.
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
I am running into this as well
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.
@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": { ... }, "devDependencies": { ... }, "resolutions": { "**/rxfire": "6.0.3" }
@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
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" },
@oluijks – looks like that StackBlitz example works (at least, on my end).
Side note: I believe
firebase
needs to be added to the dependencies inpackage.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?
I have faced the same issue, tried to install different version of AngularFire, Rxfire and Firebase, yet getting errors.
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
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
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
@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:
...
"@angular/fire": "7.6.1",
"firebase": "^10.4.0",
"rxfire": "6.0.4"
...
It's now working for Angular 15, 16, and Ionic 7."
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
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 :
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?
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
@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 ?
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"
"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.
Overrides setup that resolves this issue: https://github.com/FirebaseExtended/rxfire/issues/88#issuecomment-1715851191
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.
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