angular/angularfire

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

vajahath opened this issue · 4 comments

vajahath commented

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.

google-oss-bot commented

This issue does not seem to follow the issue template. Make sure you provide all the required information.

vajahath commented

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.

  • 👍1
davidbusuttil commented

Try using PendingTasks if you are using SSR.