Angular: `withDevtools` option `loadDevtools` no longer supports dependency injection

[Eirmas]

Describe the bug

Based on the documentation, you should be able to use inject within the loadDevtools option in the withDevtools function.
See https://github.com/TanStack/query/blob/main/docs/framework/angular/devtools.md

Now if you do this, you will get an NG0203 error.

Breaking PR: #8817

Your minimal, reproducible example

https://noop.com

Steps to reproduce

1. Initialize angular with tanstack query
2. Write a simple service with a boolean signal that will determine if the devtool is active
3. Try injecting it in the "loadDevtools" option.

Expected behavior

As a developer I expected the devtools not to throw an NG0203 error

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Any browser

Tanstack Query adapter

angular-query

TanStack Query version

v5.68.1

TypeScript version

v5.8.2

Additional context

No response

[MichalKliment]

Would it be please possible to wrap call of optionsFn with runInInjectionContext? Like:

export function withDevtools(
  optionsFn?: () => DevtoolsOptions,
): DeveloperToolsFeature {
  let providers: Array<Provider> = []
  if (!isDevMode() && !optionsFn) {
    providers = []
  } else {
    providers = [
      {
        // Do not use provideEnvironmentInitializer while Angular < v19 is supported
        provide: ENVIRONMENT_INITIALIZER,
        multi: true,
        useFactory: () => {
          if (!isPlatformBrowser(inject(PLATFORM_ID))) return noop
          const injectedClient = inject(QueryClient, {
            optional: true,
          })
          const destroyRef = inject(DestroyRef)

-         const options = computed(() => optionsFn?.() ?? {})
+         const injector = inject(Injector);
+
+         const options = computed(() =>
+             runInInjectionContext(injector, () =>  optionsFn?.() ?? {};
+         );

[k3nsei]

I tried to upgrade my library (https://github.com/k3nsei/ngx-signal-store-query) to latest version of Angular and TanstackQuery. Then this line stopped working https://github.com/k3nsei/ngx-signal-store-query/blob/08ea07f9c6e30259734b6ee6231be339a5d100c4/apps/demo/src/app/counter/counter.store.ts#L15

So the injection context is also missing in injectMutation which is regression and breaks previously writen code.

[k3nsei]

Using inject is not anty-pattern and clearly @arnoud-dv make big mistake there. DI is basic building block in Angular and almost everything there is based on that feature. Please see documentation of effect you can pass injector there https://angular.dev/api/core/CreateEffectOptions

🚨 Rollback this PR it is breaking our codebase.

If it were an anti-pattern, then https://angular.dev/api/core/runInInjectionContext would not exist.

You can even see how NgRx Signal Store is allowing for that https://ngrx.io/guide/signals/signal-store#reactive-store-methods

Just rollback #8817 and don't introduce breaking changes like that as they are breaking production codebases.

[jonath92]

It also breaks our code. We have implemented a simple feature toggle mechanism which inter alia allows users to enable/disable the tanstack query devtools dynamically in our app. In the past we could do this very comfortable with:

    provideTanStackQuery(
      queryClient,
      withDevtools(() => ({
        loadDevtools: injectIsFeatureEnabled("Tanstack Query DevTools")(),
      }))
    ),

Now this doesn't work anymore :-(. To do the same now, we would AFAICS need to create an extra component and copy parts of the logic from here in the component. I can therefore only agree with the request to revert the change.

[BThomann]

I guess there are two points that are mixed here:

1. Not being able inject in withDevtools that is the point of the other. I agree that this is not desirable and also diverges from how native Angular with* functions behave see e.g.: https://angular.dev/api/router/withNavigationErrorHandler
2. The point from @k3nsei who is mainly talking about injectMutation (same for injectQuery). Here I have to strongly disagree:

• The argument about the effect is wrong. Altough you can pass a injector to the effect you still can not call inject inside the effect. The injector is just needed for the creation of the effect.
• runInInjectionContext is a different tool for a different job
• As it is still tagged as experimental breaking changes are to be expected.
• I see injectMutation (same for injectQuery) more as a computed where you can also not use inject so this makes sense to me

So TL;DR my 2 cents:

• Roll back the changes on withDevtools to be able to use inject there
• Keep the changes to injectMutation & injectQuery

[k3nsei]

@BThomann then it would ruin all of our usage of TanStack Query and it becomes trash for us. Forcing us to move to resource() and httpResource(). Please look how NgRx Signals works with their factory funtions where you able to inject anything that you need.

Whole Angular is based on DI, not like trashy React or other JSX based frameworks. So if you want to support Angular properly you need to adapt it proper way having great support for DI.

Maybe you guys weren't never working with huge and complex codebases and don't understand how important this really is.

[BThomann]

I don't get it why this would block TanStack Query I the typical patter any way is it to use like this (example from the docs):

@Component({
  ...
})
export class TodosComponent {
  todoService = inject(TodoService)
  mutation = injectMutation(() => ({
    mutationFn: (todoId: number) =>
      lastValueFrom(this.todoService.create(todoId)),
  }))
}

Can you elaborate on where you would need to inject inside injectMutation?

And please try to follow a respectful conversation here. We can disagree on points but there is no need to insult other persons or projects.

[k3nsei]

I don't get it why this would block TanStack Query I the typical patter any way is it to use like this (example from the docs):

@component({
...
})
export class TodosComponent {
todoService = inject(TodoService)
mutation = injectMutation(() => ({
mutationFn: (todoId: number) =>
lastValueFrom(this.todoService.create(todoId)),
}))
}
Can you elaborate on where you would need to inject inside injectMutation?

And please try to follow a respectful conversation here. We can disagree on points but there is no need to insult other persons or projects.

But this is childish example. First of all it's anty-pattern to creating queries inside component and having any business logic there. For that you should have services. Components should just render stuff and handling user interactions then doing small orchestration to pass data to services where businesses logic should be handled (no tight coupling). Then with complex codebases where there are lots of generic services which are based for example on strategies/policies injected through DI. People are using composition for example by using providers to inject fn with given implementation. You can image for example you want to have generic image upload and you want to change endpoint which is used based on where it placed in component tree.

[k3nsei]

@BThomann even in you example you can think about example where you need to get todoId as a signal from some store which is provided in router route or some parent/child component. In Angular not everything is global there are many contexts and Injection Trees.

[BThomann]

The query itself should be created in the InjectionContext of where it lives. So if you would use the injectQuery in a service (worst case providedIn: "root") it would "live" within that service not the component where its needed.
I agree that this is a simple example. I like to use the query options service pattern to remove the buisness logic but the injectQuery should be call in the same context the component lives how ever one achieves that.

With that out of the way I still can't see why one would need to call inject inside. I agree with you points about DI and so but that not the thing in question.

@BThomann even in you example you can think about example where you need to get todoId as a signal from some store which is provided in router route or some parent/child component. In Angular not everything is global there are many contexts and Injection Trees.

Yeah in that case the todoId is needed imperatively when we call the mutate function so no issue there - it can come from store input etc.

[k3nsei]

@BThomann image simple concept as factory function. Then everything starting to make sense.

[BThomann]

See also no issue there. Would you mind providing a code example?