FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

Adding more injector safety by jamesdaniels · Pull Request #3590 · angular/angularfire · GitHub

Adding more injector safety - #3590

Merged
jamesdaniels merged 4 commits into
angular:mainfrom
jamesdaniels:jamesdaniels_moreInjectorSafety
Dec 13, 2024
Merged

Adding more injector safety#3590
jamesdaniels merged 4 commits into
angular:mainfrom
jamesdaniels:jamesdaniels_moreInjectorSafety

Conversation

jamesdaniels commented Dec 13, 2024
edited
Loading

Copy link
Copy Markdown
Contributor
  • 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

jamesdaniels merged commit 45ccd39 into angular:main Dec 13, 2024
jamesdaniels deleted the jamesdaniels_moreInjectorSafety branch December 13, 2024 21:35

Copy link
Copy Markdown

@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.

Copy link
Copy Markdown
Contributor Author

@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

Copy link
Copy Markdown

@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!

Copy link
Copy Markdown

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
});

Copy link
Copy Markdown
Contributor

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 commented Aug 22, 2025

Copy link
Copy Markdown

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

This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants


Back | FazBrowse Home | New Git URL