Firebase API called outside injection context - missing details on how to fix this #3629
Description
I am using the "^19.0.0" version of this package with newly created angular application using ng new (angular 19).
Note that I have chosen options to enable ssr while creating the angular app using ng new.
Now, a simple code like:
import { Component, OnInit } from '@angular/core'; import { RouterOutlet } from '@angular/router'; import { AsyncPipe, JsonPipe } from '@angular/common'; import { Observable } from 'rxjs'; import { Firestore, doc, docData } from '@angular/fire/firestore'; @Component({ selector: 'app-root', imports: [RouterOutlet, AsyncPipe, JsonPipe], template: ` <div> Data from Firestore: <pre>{{ item$ | async | json }}</pre> </div> `, styleUrl: './app.component.scss' }) export class AppComponent implements OnInit { title = 'bla'; item$: Observable<any> | undefined; constructor(private firestore: Firestore) {} ngOnInit(): void { this.item$ = this.getDocument('test/BnKno4vcZKHqXrRbyFye'); } getDocument(path: string): Observable<any> { const documentReference = doc(this.firestore, path); return docData(documentReference); } }give the following warnings (but the code is working):
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 Firebase API called outside injection context: docData Firebase API called outside injection context: docData If angular fire could elaborate this error a bit saying what we have to do to fix this, that would be very nice.