Angular 16.2.0 - Set Firestore active - Error

[mwaldheim]

Version info

Angular: 16.2.0

Firebase: 9.23.0

AngularFire: 7.6.1

Other (e.g. Ionic/Cordova, Node, browser, operating system): Node 20.5.1; Windows 11; Google Chrome (Lates)

How to reproduce these conditions

Failing test unit, Stackblitz demonstrating the problem

doesnt Run there

Steps to set up and reproduce

Install an Angular Client with version 16.2.0 and add "ng add @angular/fire" (for Module and Standalone the same Error.

Add the Firebase Config. Then add Firestore and compiling crashed...

Angular is setup in Standalone. I add this to app.config.ts, what ist included to main.ts (boostrapApplication(_, appConfig).

import { firebaseConfig } from './app.firebase';
import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { getStorage, provideStorage } from '@angular/fire/storage';
import { getAuth, provideAuth } from '@angular/fire/auth';
import { getFirestore, provideFirestore } from '@angular/fire/firestore';

export const appConfig: ApplicationConfig = {
  providers: [
     ...
    importProvidersFrom(provideFirebaseApp(() => initializeApp(firebaseConfig))),
    importProvidersFrom(provideStorage(() => getStorage())),
    importProvidersFrom(provideFirestore(() => getFirestore())), // Error comes only when set this
    importProvidersFrom(provideAuth(() => getAuth())),
  ],
};

Same Problem with ngModule....

Sample data and security rules

Debug output

** Errors in the JavaScript console **

** Output from firebase.database().enableLogging(true); **

node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/rxfire/firestore/lite/interfaces.d.ts:8:29 - error TS2314: Generic type 'AggregateQuerySnapshot<T>' requires 1 type argument(s).

 8 export type CountSnapshot = lite.AggregateQuerySnapshot<{
                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 9     count: lite.AggregateField<number>;
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
10 }, any, DocumentData>;

** Screenshots **

Expected behavior

Actual behavior

[Celtian]

Angular 16.2 is working with this 3 deps right now:

"@angular/fire": "7.2.0",
"firebase": "^10.3.1",
"rxfire": "^6.0.5",

[mwaldheim]

Sorry, but i can't aprove this. How does it work for Angular 16.2 Standalone?

[sycohuesca]

[email protected] with error, solution: npm i [email protected] or yarn add [email protected]

[mwaldheim]

Your answer fix the first problem, but it gives me another Error:

[CezaryStasiak]

Got same problem, out of the blue CI started failing with that error without any firebase related code changes or versions changes. Libs: "@angular/core": "^14.2.12", "@angular/fire": "^7.5.0",

[spock123]

Also suddenly getting this error, no code changes whatsoever:

NG0203: inject() must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with `runInInjectionContext`. Find more at https://angular.io/errors/NG0203
    at injectInjectorOnly (core.mjs:731:15)
    at ɵɵinject (core.mjs:744:42)
    at Object.FirebaseAppModule_Factory [as useFactory] (angular-fire-app.js:57:42)

NG 16.2.3, Standalone.

The issue comes as soon as I load the firestore, as mentioned above.

UPDATE: downgrading from Angular 16.2.6 to 16.2.3 resolved my issue!

[mwaldheim]

I have now gone down to Angular 16.2.3. Unfortunately, this triggers a new problem. To be honest, I'm getting desperate. It is no longer possible to use Firebase properly with Angular.

./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/rxfire/firestore/index.esm.js:304:25-38 - Error: export '__spreadArray' (imported as '__spreadArray') was not found in 'tslib' (po
ssible exports: __assign, __asyncDelegator, __asyncGenerator, __asyncValues, __await, __awaiter, __classPrivateFieldGet, __classPrivateFieldSet, __createBinding, __decorate, __exportStar, __extends, __generator, __importDefault, __importStar, __makeTemplateObject, __metadata, __param, __read, __rest, __spread, __spreadArrays, __values)

[rgant]

See: https://github.com/FirebaseExtended/rxfire/issues/88#issuecomment-1715851191

[mwaldheim]

Thank you, npm solves the problem. But still, it seems to be an error then when pnpm has problems with it.

The development team should definitely look at the case, as pnpm is becoming more and more useful. I can live with it temporarily.

[rgant]

I don't think it is an npm vs pnpm issue.

The core issue is that [email protected] introduced a breaking dependency change requiring firebase@10 instead of allowing both v9 & v10 as [email protected] does.

This is a violation of the standard semver protocol for version numbering. In my opinion [email protected] should have been [email protected]. Which would have avoided these changes.

I don't use pnpm, but presumably by following my example overrides and their documentation you can produce a version for yourself that does the same thing.

If you do make an overrides for pnpm you should document it on some of the issues & pull requests so others can benefit.

[spock123]

I do think it's pnpm that is the culprit, I still get this issue on anything about 16.2.3, and here is a snippet from my pnpm-lock file, it seems angular/fire is locked on to 16.2.3 (which is why it works up until that version for me)

'@angular/core':
        specifier: 17.0.0-next.6
        version: 17.0.0-next.6([email protected])([email protected])
 '@angular/fire':
        specifier: 7.6.1
        version: 7.6.1(@angular/[email protected])(@angular/[email protected])(@angular/[email protected])(@angular/[email protected])([email protected])([email protected])([email protected])

[spock123]

Has anyone been able to solve this with pnpm? We are stuck on 16.2.3 and would like to use 17-next (or upgrade newer 16.2.* versions), but it's not possible due to this issue. We cannot use npm because we have shared workspace modules.

Update: downgrading Angular/Fire to 7.4.0 solves the issue for me. The question is what has happened in newer versions?