Always same error Firebase API called outside injection context

On my Angular 19 application, I call some firestore service. Each, result are OK, but I have these two message in the console :

Firebase API called outside injection context

Calling Firebase APIs outside of an Injection context may destabilize your application leading to subtle change-detection and hydration bugs. Find more at https://github.com/angular/angularfire/blob/main/docs/zones.md

This is my Code :

app.config.ts

import { provideHttpClient } from '@angular/common/http';
import { ApplicationConfig } from '@angular/core';
import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { environment } from '../environments/environment';
import { provideFirestore, getFirestore } from '@angular/fire/firestore';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideFirebaseApp(() => initializeApp(environment.firebaseConfig)),
    provideHttpClient(),
    provideFirestore(() => getFirestore()),

  ]
};

app.component.ts

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  imports: [
    CommonModule,
    RouterOutlet,
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
  standalone: true
})
export class AppComponent {
  title = 'asp-app-clone';
}

app.routes.ts

import { Routes } from '@angular/router';
import { HomeComponent } from './component/home/home.component';

export const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: '', redirectTo: '/home', pathMatch: 'full' },

];

home.component.ts

import { Component, inject, OnInit } from '@angular/core';
import { Object as myObject } from '../../model/object';
import { CommonModule } from '@angular/common';
import { MyService as MyService } from '../../service/my-service.service';

@Component({
  selector: 'app-home',
  imports: [CommonModule],
  templateUrl: './home.component.html',
  styleUrl: './home.component.css',
  standalone: true
})
export class HomeComponent implements OnInit {

  myService: MyService = inject(MyService);
  myList: myObject[] = [];

  ngOnInit(): void {
    this.myService.getAllObjects().then(object => {
      this.myList = object;
    })
  }
}

my-service.ts

import { inject, Injectable } from '@angular/core';
import { collection, Firestore,  getDocs, query, where } from '@angular/fire/firestore';
import { Object } from '../model/object';

@Injectable({
  providedIn: 'root',
})
export class MyService {

  firestore: Firestore = inject(Firestore);

  async getAllObjects(): Promise<Object[]> {
    const ref = collection(this.firestore, 'MyFirestoreCollection');
    const q = query(ref, where('isActive', '==', true));
    const snapshot = await getDocs(q);
    
    const allObjects: Object[] = [];
  
    for (const doc of snapshot.docs) {
      const data = doc.data();
      const myObject = new Object(
        doc.id,
        data['idFunc'],
      );
      allObjects.push(myObject);
    }
  
    return allObjects;
  }
  
 }

Firebase call is OK (I have my result). I also try to replace @Inject by a constructor, but it's the same.

Perhaps it's nothing and only for dev and/or debug. https://github.com/angular/angularfire/blob/main/docs/zones.md tell me that the second message is just a warning, but I don't find anything for the first one and there are a lot of these warning on my visual code console.

Is this how you called/used inject() inside a method or the constructor? Here’s what I think as possible options or approaches:

Thru Method:

import { inject, Injectable } from '@angular/core';
import { collection, Firestore,  getDocs, query, where } from '@angular/fire/firestore';
import { Object } from '../model/object';

@Injectable({
  providedIn: 'root',
})
export class MyService {
  async getAllObjects(): Promise<Object[]> {
    const firestore = inject(Firestore); // inject()
    const ref = collection(this.firestore, 'MyFirestoreCollection');
    const q = query(ref, where('isActive', '==', true));
    const snapshot = await getDocs(q);
    
    const allObjects: Object[] = [];
  
    for (const doc of snapshot.docs) {
      const data = doc.data();
      const myObject = new Object(
        doc.id,
        data['idFunc'],
      );
      allObjects.push(myObject);
    }
  
    return allObjects;
  }
  
 }

Thru Constructor injection:

import { inject, Injectable } from '@angular/core';
import { collection, Firestore,  getDocs, query, where } from '@angular/fire/firestore';
import { Object } from '../model/object';

@Injectable({
  providedIn: 'root',
})
export class MyService {
  constructor(private firestore: Firestore) {}

  async getAllObjects(): Promise<Object[]> {
    const ref = collection(this.firestore, 'MyFirestoreCollection');
    const q = query(ref, where('isActive', '==', true));
    const snapshot = await getDocs(q);

    const allObjects: Object[] = [];

    for (const doc of snapshot.docs) {
      const data = doc.data();
      const myObject = new Object(doc.id, data['idFunc']);
      allObjects.push(myObject);
    }

    return allObjects;
  }
}

If you’re still encountering the same issue by trying the options above, another workaround is to inject Angular’s NgZone and use it to run Firebase calls within the Angular Zone.

Update MyService to use NgZone, something like this:

import { inject, Injectable, NgZone } from '@angular/core';
import { collection, Firestore, getDocs, query, where } from '@angular/fire/firestore';
import { Object } from '../model/object';

@Injectable({
  providedIn: 'root',
})
export class MyService {

  firestore: Firestore = inject(Firestore);
  ngZone: NgZone = inject(NgZone);  // Inject NgZone to ensure Firebase calls run within Angular Zone

  async getAllObjects(): Promise<Object[]> {
    const ref = collection(this.firestore, 'MyFirestoreCollection');
    const q = query(ref, where('isActive', '==', true));

    // Ensure Firebase call runs inside Angular's zone
    return this.ngZone.run(async () => {
      const snapshot = await getDocs(q);
      const allObjects: Object[] = [];

      for (const doc of snapshot.docs) {
        const data = doc.data();
        const myObject = new Object(
          doc.id,
          data['idFunc'],
        );
        allObjects.push(myObject);
      }

      return allObjects;
    });
  }
}

You may also want to check these related GitHub issues:

Firebase API called outside injection context - missing details on how to fix this #3629

"Warning: Firebase API called outside injection context" on non-async functions #3611

Hope this helps!