ERROR FirebaseError: Expected type 'Query', but it was: a custom wh object

[fmauff1978]

Version info
Angular: 16

Firebase: 7

AngularFire: latest

Other (e.g. Ionic/Cordova, Node, browser, operating system): Node

export class CategoryComponent {

private fs: Firestore = inject(Firestore);
categories$: Observable<Category[]>;

constructor() {
// get a reference to the user-profile collection
const categoryCollection = collection(this.fs, 'categories');

// get documents (data) from the collection using collectionData
this.categories$ = collectionData(categoryCollection) as Observable<Category[]>;

console.log(categoryCollection);
}

}

The Chrome console returns> ERROR FirebaseError: Expected type 'Query', but it was: a custom wh object

What is happening?

[chetelev]

Any updates on this ? I got the same error

[rgant]

Well firebase v7 is not appropriate for Angular Fire 7.6.1 (latest).
https://github.com/angular/angularfire#angular-and-firebase-versions

And without more details it is hard to diagnose. What is the complete output of ng version? What is your code (in a codeblock)?

And you should probably create your own Angular Service to wrap the modular functions for better ability to unit test.

[chetelev]

@rgant i tried using various versions including Firebase 9 which says compatible per the documentation.

Regarding code snippet is the same exact sample written in angularfire docs: https://github.com/angular/angularfire#example-use

And if we try using angular/fire 7.6 with firebase 9.23.0
there is a different erorr:

Error: node_modules/rxfire/firestore/lite/interfaces.d.ts:8:29 - error TS2314: Generic type 'AggregateQuerySnapshot' requires 1 type argument(s).

8 export type CountSnapshot = lite.AggregateQuerySnapshot<{

9 count: lite.AggregateField;

10 }, any, DocumentData>;

[shadow1349]

I'm also seeing this error which is totally blocking me from using @angular/fire at all

[shadow1349]

Here's all the info from my application

package.json

{
  "name": "myapp",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {},
  "private": true,
  "devDependencies": {
    "@angular-devkit/build-angular": "~16.2.0",
    "@angular-devkit/core": "~16.2.0",
    "@angular-devkit/schematics": "~16.2.0",
    "@angular-eslint/eslint-plugin": "~16.0.0",
    "@angular-eslint/eslint-plugin-template": "~16.0.0",
    "@angular-eslint/template-parser": "~16.0.0",
    "@angular/cli": "~16.2.0",
    "@angular/compiler-cli": "~16.2.0",
    "@angular/language-service": "~16.2.0",
    "@nestjs/schematics": "^10.0.1",
    "@nestjs/testing": "^10.0.2",
    "@nx/angular": "^16.10.0",
    "@nx/eslint-plugin": "16.10.0",
    "@nx/jest": "16.10.0",
    "@nx/js": "16.10.0",
    "@nx/linter": "16.10.0",
    "@nx/nest": "16.10.0",
    "@nx/node": "^16.10.0",
    "@nx/webpack": "16.10.0",
    "@nx/workspace": "16.10.0",
    "@schematics/angular": "~16.2.0",
    "@types/jest": "^29.4.0",
    "@types/node": "~18.7.1",
    "@typescript-eslint/eslint-plugin": "^5.60.1",
    "@typescript-eslint/parser": "^5.60.1",
    "autoprefixer": "^10.4.0",
    "eslint": "~8.46.0",
    "eslint-config-prettier": "8.1.0",
    "jest": "^29.4.1",
    "jest-environment-jsdom": "^29.4.1",
    "jest-environment-node": "^29.4.1",
    "jest-preset-angular": "~13.1.0",
    "jsonc-eslint-parser": "^2.1.0",
    "nx": "16.10.0",
    "postcss": "^8.4.5",
    "prettier": "^2.6.2",
    "tailwindcss": "^3.0.2",
    "ts-jest": "^29.1.0",
    "ts-node": "10.9.1",
    "typescript": "~5.1.3"
  },
  "dependencies": {
    "@angular/animations": "~16.2.0",
    "@angular/cdk": "^16.2.8",
    "@angular/common": "~16.2.0",
    "@angular/compiler": "~16.2.0",
    "@angular/core": "~16.2.0",
    "@angular/fire": "^7.6.1",
    "@angular/forms": "~16.2.0",
    "@angular/material": "^16.2.8",
    "@angular/platform-browser": "~16.2.0",
    "@angular/platform-browser-dynamic": "~16.2.0",
    "@angular/router": "~16.2.0",
    "@canvasjs/charts": "^3.7.23",
    "@nestjs/common": "^10.0.2",
    "@nestjs/core": "^10.0.2",
    "@nestjs/platform-express": "^10.0.2",
    "axios": "^1.0.0",
    "firebase": "^10.5.0",
    "reflect-metadata": "^0.1.13",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.13.0"
  }
}

NG Version

Angular CLI: 16.2.6
Node: 20.8.1 (Unsupported)
Package Manager: npm 10.2.0
OS: darwin arm64

Angular: 16.2.9
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1602.6
@angular-devkit/build-angular   16.2.6
@angular-devkit/core            16.2.6
@angular-devkit/schematics      16.2.6
@angular/cdk                    16.2.8
@angular/cli                    16.2.6
@angular/fire                   7.6.1
@angular/material               16.2.8
@schematics/angular             16.2.6
rxjs                            7.8.1
typescript                      5.1.6
zone.js                         0.13.3
    
Warning: The current version of Node (20.8.1) is not supported by Angular.

quiz.services.ts

import { Injectable } from '@angular/core';
import {
  Firestore,
  collection,
  collectionData,
  orderBy,
  query
} from '@angular/fire/firestore';
import { Quiz } from '@quizapp/models';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class QuizService {
  private quizCol = collection(this.db, 'quizzes');
  constructor(private db: Firestore) {}

  getAllQuizzes() {
    const q = query(this.quizCol, orderBy('createdOn', 'desc'));
    return collectionData(q) as Observable<Quiz[]>;
  }

}

[rgant]

Error: node_modules/rxfire/firestore/lite/interfaces.d.ts:8:29 - error TS2314: Generic type 'AggregateQuerySnapshot' requires 1 type argument(s).

This is a fix that works for many on that issue: FirebaseExtended/rxfire#88 (comment)

[rgant]

Warning: The current version of Node (20.8.1) is not supported by Angular.

Well first off, use Node 18 which is supported by Angular. See nvm to manage various NodeJS versions.

Second, @angular/fire v7.6.1 does not support firebase@10
https://github.com/angular/angularfire#angular-and-firebase-versions

Once you fix those, see my previous comment to find the overrides config currently required for @angular/fire

[shadow1349]

Can you tell me if there's a specific version of firebase 9 I should use? I went to 9.23.0 and it doesn't seem to pick up the initializeApp call.

app.config.ts

import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import {
  provideRouter,
  withEnabledBlockingInitialNavigation,
} from '@angular/router';
import { appRoutes } from './app.routes';
import { provideAnimations } from '@angular/platform-browser/animations';
import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { provideFirestore, getFirestore } from '@angular/fire/firestore';
import { environment } from '../environments/environment.development';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(appRoutes, withEnabledBlockingInitialNavigation()),
    provideAnimations(),
    importProvidersFrom([
      provideFirebaseApp(() => initializeApp(environment.firebase)),
      provideFirestore(() => getFirestore()),
    ]),
  ],
};

I have another project using Angular 15 (Angular Fire 7.5.0 & Firebase 9.18.0) with an identical config that works fine. I also tried firebase 9.18.0, which made no difference.

I also tried swapping around my service

@Injectable({
  providedIn: 'root',
})
export class QuizService {
  private db = inject(Firestore);
  private quizCol = collection(this.db, 'quizzes');

  getAllQuizzes() {
    const q = query(this.quizCol, orderBy('createdOn', 'desc'));
    return collectionData(q) as Observable<Quiz[]>;
  }
}

Again, no change.

[fmauff1978]

Is it app.config.ts file? I put the initialize command in app.module.ts. I solved my question using angular/fire/compat library Em sáb., 14 de out. de 2023 às 15:40, shadow1349 ***@***.***> escreveu:

…

Can you tell me if there's a specific version of firebase 9 I should use? I went to 9.23.0 and it doesn't seem to pick up the initializeApp call. app.config.ts import { ApplicationConfig, importProvidersFrom } from ***@***.***/core';import { provideRouter, withEnabledBlockingInitialNavigation,} from ***@***.***/router';import { appRoutes } from './app.routes';import { provideAnimations } from ***@***.***/platform-browser/animations';import { initializeApp, provideFirebaseApp } from ***@***.***/fire/app';import { provideFirestore, getFirestore } from ***@***.***/fire/firestore';import { environment } from '../environments/environment.development'; export const appConfig: ApplicationConfig = { providers: [ provideRouter(appRoutes, withEnabledBlockingInitialNavigation()), provideAnimations(), importProvidersFrom([ provideFirebaseApp(() => initializeApp(environment.firebase)), provideFirestore(() => getFirestore()), ]), ],}; [image: image] <https://user-images.githubusercontent.com/9685464/275272771-c31a7569-3e95-4721-94fe-cb6e3f8cc57b.png> I have another project using Angular 15 (Angular Fire 7.5.0 & Firebase 9.18.0) with an identical config that works fine. I also tried firebase 9.18.0, which made no difference. I also tried swapping around my service @Injectable({ providedIn: 'root', }) export class QuizService { private db = inject(Firestore); private quizCol = collection(this.db, 'quizzes'); getAllQuizzes() { const q = query(this.quizCol, orderBy('createdOn', 'desc')); return collectionData(q) as Observable<Quiz[]>; } } Again, no change. — Reply to this email directly, view it on GitHub <#3442 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AONNMV45H47BSMV2WPYNR6DX7LMDRAVCNFSM6AAAAAA5N3F7E2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTONRTGEZDCNRSHE> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[shadow1349]

There's no app module; it's a standalone angular app. So the app config goes straight into the main.ts

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig).catch((err) =>
  console.error(err)
);

[rgant]

import { environment } from '../environments/environment.development';

If you are using Angular Environments correctly you should be importing:

import { environment } from '../environments/environment';

When you run ng serve or ng build then Angular will look at the defaultConfiguration in your angular.json or your --configuration flag will determine which environment.[NAME].ts file replaces environment.ts.

Edit: to be clear, your problem is that in provideFirebaseApp(() => initializeApp(environment.firebase)) I believe your environment.firebase is undefined and this error is the one you get when calling initializeApp without a configuration.

[shadow1349]

It's definitely not undefined, I rolled back @angular/fire from 7.6.1 to 7.6.0 and it started working

[fmauff1978]

Glad it worked! I made the same rollback and the error ends... Thank you Em ter., 17 de out. de 2023 às 10:56, shadow1349 ***@***.***> escreveu:

…

It's definitely not undefined, I rolled back @angular/fire from 7.6.1 to 7.6.0 and it started working — Reply to this email directly, view it on GitHub <#3442 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AONNMVZ4KRAPKJB7VPGAXILX72FAZAVCNFSM6AAAAAA5N3F7E2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTONRWGQ3TGNJYGI> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[rgant]

It's definitely not undefined, I rolled back @angular/fire from 7.6.1 to 7.6.0 and it started working

Please do read the linked documentation for how Angular Environments work.

[axp3780]

So I am using @angular/fire v7.6.1 and firebase v10.5.0. I am getting "authstateReady() missing in @angular/fire/auth but required in @firebase/auth."
Turns out they have introduced authstateReady() in v10.1.0 firebase. So I used firebase v9.23.0 and got this error
"Error: node_modules/rxfire/firestore/lite/interfaces.d.ts:8:29 - error TS2314: Generic type 'AggregateQuerySnapshot' requires 1 type argument(s)."

now to solve this error i installed ~rxfire:6.3.0 and now i got this error after successful compilation
"ERROR FirebaseError: Expected type 'Query', but it was: a custom fh object"

here is my package.json

` "dependencies": {
    "@angular/animations": "^16.1.0",
    "@angular/cdk": "^16.2.8",
    "@angular/common": "^16.1.0",
    "@angular/compiler": "^16.1.0",
    "@angular/core": "^16.1.0",
    "@angular/fire": "^7.6.1",
    "@angular/forms": "^16.2.1",
    "@angular/material": "^16.2.8",
    "@angular/platform-browser": "^16.1.0",
    "@angular/platform-browser-dynamic": "^16.1.0",
    "@angular/router": "^16.1.0",
    "@fortawesome/fontawesome-free": "^6.4.2",
    "@ng-bootstrap/ng-bootstrap": "^15.1.0",
    "@ngneat/hot-toast": "^6.0.1",
    "@ngneat/overview": "^5.1.0",
    "@ngneat/until-destroy": "^10.0.0",
    "@popperjs/core": "^2.11.6",
    "angular-datatables": "^16.0.0",
    "bootstrap": "^5.3.1",
    "datatables.net": "^1.11.3",
    "datatables.net-dt": "^1.11.3",
    "firebase": "^10.5.0",
    "jquery": "^3.7.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.13.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^16.1.6",
    "@angular/cli": "~16.1.6",
    "@angular/compiler-cli": "^16.1.0",
    "@angular/localize": "^16.1.0",
    "@types/datatables.net": "^1.10.21",
    "@types/jasmine": "~4.3.0",
    "@types/jquery": "^3.5.9",
    "jasmine-core": "~4.6.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.1.3",
    "webpack": "^5.88.2",
    "webpack-dev-server": "^4.15.1"
  }
}
`

and this is how i have initialized the app in app.module.ts

provideFirebaseApp(() => initializeApp(environment.firebase)),
 provideAuth(() => getAuth()),
 provideDatabase(() => getDatabase()),
 provideFirestore(() => getFirestore()),