Adding more injector safety

[jamesdaniels]

• Zone wrapper noops for our other helpers
• Add a warning / error on potential Zone / hydration issues
• Pass injection context to zoneWrapFn
• Pass injection context into the Promise wrapper
• beforeAuthStateChanged should not block

[davidgeary]

@jamesdaniels Just a heads up...

I've just installed RC4 and noticed the "Firebase API called outside injection context" warning in the console. The error message also includes a link to "Find out more" pointing to https://github.com/angular/angularfire/blob/main/docs/zones.md (see line 87 in zone.ts) but this file doesn't appear to exist at the moment.

[jamesdaniels]

@davidgeary thanks yeah, getting that page together now. You can likely safely ignore the warnings, they're only produced in dev mode and are intended to help developers track down any change-detection / rehydration instabilities

[davidgeary]

@jamesdaniels Ah, thanks. I was just starting to work through my code to see where the problem was, so you've saved me some time there!

[ciriousjoker]

Apparently, once you await something inside an injection context, you lose the injection context.

Here's our workaround:

/**
 * Runs an async function in the injection context. This can be awaited, unlike @see {runInInjectionContext}.
 * For some ungodly reason, only the first awaited call inside the fn callback is actually inside the injection context.
 * After something is awaited, the context is lost.
 *
 * NOTE: Use this sparingly and only when absolutely necessary.
 * This is a band-aid solution for this issue:
 * https://github.com/angular/angularfire/pull/3590
 *
 * @param injector The injector, usually inject(EnvironmentInjector)
 * @param fn The async callback to be awaited
 */
export async function runAsyncInInjectionContext<T>(injector: Injector, fn: () => Promise<T>): Promise<T> {
  return await runInInjectionContext(injector, () => {
    return new Promise((resolve, reject) => {
      fn().then(resolve).catch(reject);
    });
  });
}

Usage:

await runAsyncInInjectionContext(this.injector, async () => {
  await loadBundle(this.firestore, response);
  await getDocs(); // <-- this no longer is inside context
});

[syamanashi]

Apparently, once you await something inside an injection context, you lose the injection context.

Here's our workaround:

/**
 * Runs an async function in the injection context. This can be awaited, unlike @see {runInInjectionContext}.
 * For some ungodly reason, only the first awaited call inside the fn callback is actually inside the injection context.
 * After something is awaited, the context is lost.
 *
 * NOTE: Use this sparingly and only when absolutely necessary.
 * This is a band-aid solution for this issue:
 * https://github.com/angular/angularfire/pull/3590
 *
 * @param injector The injector, usually inject(EnvironmentInjector)
 * @param fn The async callback to be awaited
 */
export async function runAsyncInInjectionContext<T>(injector: Injector, fn: () => Promise<T>): Promise<T> {
  return await runInInjectionContext(injector, () => {
    return new Promise((resolve, reject) => {
      fn().then(resolve).catch(reject);
    });
  });
}

Usage:

await runAsyncInInjectionContext(this.injector, async () => {
  await loadBundle(this.firestore, response);
  await getDocs(); // <-- this no longer is inside context
});

This workaround worked for me to suppress the console warnings in Angular v20.0. with "@angular/fire": "^20.0.1",. I tried every other method I could find on any thread about the issue and this is the only thing that suppresses the warnings.

Is this work-around still the only option?

[sasos90]

If i import the "getDocs" od "doc" or "collection" from "firebase/firestore" then i have no warnings. But if i use them from @angular/fire, then i get warnings. What is the solution here?
I use v19.2.0 of @angular/fire