Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

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

Ouverte
#3,621 24 commentaires 3 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Évaluation

Difficulté
4/5
Temps estimé
3-5 jours
Accessibilité débutants
45/100
Type d'issue
Bug
Clarté
À clarifier
Activité
Calme
Stack technique
angular, firebase, typescript
Domaine
backend, databases

Piste de recherche

Commencez par l'appel dans auth.service.ts à la ligne 38 et suivez-le à travers AngularFirestore.doc jusqu'à angular-fire-compat-firestore.mjs, en utilisant la stack trace NG0203 comme point d'entrée. Comparez les versions de dépendances signalées d'Angular v19 et de @angular/fire v19, et examinez la discussion de l'issue à la recherche d'une reproduction ou d'une résolution établie. C'est terminé lorsque l'erreur de contexte d'injection est expliquée et qu'un correctif de compatibilité vérifié ou une prochaine étape confirmée par un maintainer est identifié.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

comp: compat needs: investigation type: bug version: current (v17+)

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.

Langage dominant
TypeScript
Étoiles
7.8k
Forks
2.2k
Merge moyen
3 j 6 h
PR mergées (30 j)
5

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de angular/angularfire

Toutes les issues de angular/angularfire

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.