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.

Continue reading...