Inject() must be called from an injection context such as a constructor in AngularFirestoreDoc after upgrading to Angular v19

[djamn]

I recently upgraded all dependencies to Angular v19 (from v18). I was previously on Angular v18 where everything worked fine. However, now, my whole console is spammed with the following error:

ERROR RuntimeError: 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.dev/errors/NG0203
    at injectInjectorOnly (core.mjs:1104:11)
    at ɵɵinject (core.mjs:1114:40)
    at inject (core.mjs:1199:10)
    at <instance_members_initializer> (angular-fire-compat-firestore.mjs:93:14)
    at new AngularFirestoreDocument (angular-fire-compat-firestore.mjs:98:3)
    at _AngularFirestore.doc (angular-fire-compat-firestore.mjs:621:12)
    at auth.service.ts:38:14
    at switchMap.js:16:17
    at OperatorSubscriber2._this._next (OperatorSubscriber.js:14:9)
    at Subscriber2.next (Subscriber.js:32:12)

However, my auth service at line 38:14 only has the following code:
.doc<User>(`users/${user.uid}`)

The whole constructor looks like this (it is a angular service class)

  providedIn: 'root',
})
export class AuthService {
  isLoggedIn$: Observable<boolean>;
  /** User data of database */
  user$: Observable<User | null | undefined>;
  userRoles$: Observable<string[]>;
  userId: string | undefined = undefined;
  username: string | undefined = undefined;

  constructor(
    readonly firestore: AngularFirestore,
    readonly fireAuth: AngularFireAuth,
    readonly router: Router,
  ) {
    this.user$ = this.fireAuth.authState.pipe(
      switchMap((user) => {
        if (user) {
          this.userId = user.uid;
          return this.firestore
            .doc<User>(`users/${user.uid}`)
            .valueChanges()
            .pipe(
              map((userData) => {
                if (userData) {
                  this.username = userData.username; // Assign username
                }
                return userData;
              }),
            );
        } else {
          this.userId = undefined;
          this.username = undefined;
          return new Observable<User | null>((observer) => observer.next(null));
        }
      }),
    );

But I dont really know, why it does not work anymore in angular 19.

My package dependencies:

 "dependencies": {
    "@angular/animations": "^19.1.5",
    "@angular/cdk": "^19.1.3",
    "@angular/common": "^19.1.5",
    "@angular/compiler": "^19.1.5",
    "@angular/core": "^19.1.5",
    "@angular/fire": "^19.0.0",
    "@angular/forms": "^19.1.5",
    "@angular/material": "^19.1.3",
    "@angular/platform-browser": "^19.1.5",
    "@angular/platform-browser-dynamic": "^19.1.5",
    "@angular/router": "^19.1.5",
    "@fortawesome/angular-fontawesome": "^1.0.0",
    "@fortawesome/free-brands-svg-icons": "^6.7.1",
    "@fortawesome/free-regular-svg-icons": "^6.7.1",
    "@fortawesome/free-solid-svg-icons": "^6.7.1",
    "@ng-select/ng-select": "^14.2.2",
    "@ngx-translate/core": "^15.0.0",
    "@ngx-translate/http-loader": "^8.0.0",
    "angular-build-info": "^2.0.1",
    "canvas-confetti": "^1.9.3",
    "flowbite": "^2.5.2",
    "ng-recaptcha-2": "^15.0.2",
    "ngx-editor": "^18.0.0",
    "ngx-quill": "^27.0.0",
    "quill": "^2.0.3",
    "quill2-emoji": "^0.1.2",
    "rxjs": "~7.8.0",
    "tslib": "^2.8.1",
    "tw-elements": "^2.0.0",
    "zone.js": "^0.15.0"
  },

I also tried to set "preserveSymlinks": false, in angular.json however, the issue still persists.

[google-oss-bot]

This issue does not seem to follow the issue template. Make sure you provide all the required information.

[FidelNguyen]

Hi,

I have exactly the same issue.
I pass through by using following code await runInInjectionContext(this.injector, async () => { but I think it's a monkey patch that do not resolve the source.
Just want to know if there's a new way to implement or a real issue?

Thank you !

[codeneobee]

I am having the same issue with version 19.0.0, it worked with the rc.0 release candidate of version 19 before though.

I have confirmed that version 19.0.0-rc.0 is the latest version without this issue, is there some new way to implement this that is not documented or is this a real issue?

[rgant]

I believe that if you switch from the namespace syntax to the modular style that will solve the issue. https://firebase.google.com/docs/web/modular-upgrade

[djamn]

I believe that if you switch from the namespace syntax to the modular style that will solve the issue. https://firebase.google.com/docs/web/modular-upgrade

I hope there is still another solution, since my project is huge with multiple different services

[rgant]

You could wrap the modular methods in an Angular Service. Still a large change, but mostly just renaming things hopefully. I can describe more if interested.

The only other solution is to wrap every Firebase method in an injection context.

Or, stick with older versions.

[djamn]

You could wrap the modular methods in an Angular Service. Still a large change, but mostly just renaming things hopefully. I can describe more if interested.

Would appreciate it if you could provide more information!

[rgant]

Something like:

import {
  EnvironmentInjector,
  inject,
  Injectable,
  runInInjectionContext,
} from '@angular/core';
import { doc, Firestore } from '@angular/fire/firestore';
import type { DocumentReference } from '@angular/fire/firestore';

@Injectable({ providedIn: 'root' })
export class AngularFirestoreService {
  private readonly _firestore: Firestore = inject(Firestore);
  private readonly _injector: EnvironmentInjector = inject(EnvironmentInjector);

  /**
   * Note that the doc method could accept a CollectionReference or DocumentReference in addition to
   * Firestore.
   */
  public doc(path: string, ...pathSegments: string[]): DocumentReference {
    return runInInjectionContext(
      this._injector,
      (): DocumentReference => doc(this._firestore, path, ...pathSegments),
    );
  }
}

But note that I didn't test this code, it is off the cuff at 07:30 in the morning for me so it might be terrible.

[djamn]

So it works when migrating namespace syntax to modular syntax. In my case it would be the following:

  private auth: Auth;
  private firestore: Firestore;
  isLoggedIn$: Observable<boolean>;
  user$: Observable<User | null | undefined>;
  userRoles$: Observable<string[]>;
  userId: string | undefined = undefined;
  username: string | undefined = undefined;

  constructor(firestore: Firestore, private router: Router) {
    this.auth = getAuth();
    this.firestore = firestore;

    this.user$ = new Observable<User | null | undefined>((observer) => {
      onAuthStateChanged(this.auth, async (user) => {
        if (user) {
          this.userId = user.uid;
          const userDocRef = doc(this.firestore, `users/${user.uid}`);
          docData(userDocRef).subscribe((userData) => {
            if (userData) {
              this.username = (userData as User).username;
            }
            observer.next(userData as User | null);
          });
        } else {
          this.userId = undefined;
          this.username = undefined;
          observer.next(null);
        }
      });
    });

However, this is still a very breaking change to all services and I did not find anything in the changelog.

[kevin-induro]

I think it's really important not to loose sight of this issue. We are stuck not able to upgrade to Angular 19 because of this issue. We're not ready to move off the compat API yet.

Regardless, the v19 release of this library says that it supports the compat API when in fact that just seems broken. If the library is not willing to fix the issue with the compat API, than it needs to remove support for it altogether and not gaslight the community.

[JGSolutions]

Now Angular V20 is out wondering what issues will come about

[sasos90]

I lost whole 1 day, figuring out it simply doesn't work. But as far as I read somewhere, it should be supported. So we can not move to Angular 19, without migrating everything to modules SDK, period.