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: https://github.com/FirebaseExtended/rxfire/issues/88#issuecomment-1715851191

[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 https://github.com/angular/angularfire/issues/3442#issuecomment-1763121629, 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 https://github.com/angular/angularfire/issues/3442#issuecomment-1766473582, 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()),

[shadow1349]

It's in an NX monorepo. I only have 1 env file (env.development) and in project.json there are no file replacement rules. The env.firebase was not the problem.

[mkamakshi]

I am using React and Firebase. I added env file and changed all the config constannts into env variables and I noticed this error. Now I am unable to deploy my application. I upgraded to the latest version of Firebase. Still, seeing the error. Can somebody help?

[gustavodamazio]

To ensure that Angular Fire 7.6.1 functions correctly, the Firebase package installed indirectly in the node_modules must not be in version 10, as Angular Fire is encountering issues when injecting dependencies. Additionally, we need to downgrade the rxfire package from 6.0.5 to 6.0.4 to resolve the typing complaints.

The required versions working are:

"@angular/fire": "7.6.1", "rxfire": "6.0.4", "firebase": "9.23.0"

While downgrading the Firebase package to v9.23.0 to ensure Angular Fire 7.6.1 compatibility, it's important to note that this will result in the loss of some functionalities that were introduced in the Firebase SDK v10, such as the count() feature.

This is a tradeoff that needs to be considered - maintaining the Angular Fire 7.6.1 compatibility by using the older Firebase SDK version, or potentially upgrading Angular Fire to a newer version that supports the Firebase SDK v10 functionalities.

The decision will depend on the specific requirements of the project and whether the lost functionality from the Firebase SDK v10 is critical. It's worth exploring if there are any workarounds or alternative approaches that could be used to regain the desired features while still keeping Angular Fire 7.6.1 compatible.

Please let me know if you need any clarification or have additional context to share on this issue.