Repository navigation
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.
Reacted by djamn, Paul Leflon, Zekarias Taye Hirpo, Jordan, anisabboud, Jacob Nathan, Walter Łuszczyk, Sutton Yamanashi, Ilya Konrad, Marian Sorca and 1 more
Activity
google-oss-bot commentedon Feb 25, 2025
This issue does not seem to follow the issue template. Make sure you provide all the required information.
rgant commentedon Feb 25, 2025
See:
validatePasswordoutside of an Injection context #3614And https://github.com/rgant/brainfry/blob/35b5607c2e9186f5a46ff7adfae486cd1737d8df/src/app/core/firebase-app.provider.ts#L6.
IMO, if you are using the modular syntax these messages aren't useful so I have turned them off.
vajahath commentedon Feb 25, 2025
Thank you very much. The workaround fixed the warnings.
In some comments (I can't recall where) I read that to reduce the warning noise caused by this issue. But imho, I am respectfully really against it.
Yes, I am using modular syntax but the workaround actually fixed an issue I was facing.
With SSR, the server wouldn't know when a, say
await getDocs(query)has finished. So the server keep awaiting the result from firebase (may be because the arrival of the results is outside the angular "awareness"). Result is the page never loads and it keeps waiting.With the above work around, this issue is fixed. Thank you.
davidbusuttil commentedon Mar 20, 2025
Try using PendingTasks if you are using SSR.
docs(zones): show how to keep AngularFire calls in an injection conte…