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

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