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

[oluijks]

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         
[email protected]/Volumes/Develop/GitHub/*****/website
└─ [email protected]

AngularFire:

> npm list @angular/fire               
[email protected] /Volumes/Develop/GitHub/*****/website
└── @angular/[email protected]

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]

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

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

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

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

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

[oluijks]

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

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

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

[Tucaen]

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]

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

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

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

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]

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]

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]

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

[oluijks]

Reopening this issue

[Alab1]

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

[davideast]

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

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

[Sapython]

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

My angular fire version

[email protected] /Users/*******/Documents/GitHub/ProjectName
└── @angular/[email protected]

[taylorgibb]

I am running into this as well

[igoraugustynski]

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]

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

[taylorgibb]

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]

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]

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

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]

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

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