Angular query devtools are included in production builds

[OmerGronich]

Describe the bug

Unlike the React Query DevTools which are only included in development builds, Angular Query does not seem to have that logic.

By default, React Query Devtools are only included in bundles when process.env.NODE_ENV === 'development', so you don't need to worry about excluding them during a production build.

https://tanstack.com/query/v5/docs/framework/react/devtools

I would expect the behavior to be consistent across all adapters.

Your minimal, reproducible example

https://stackblitz.com/edit/tanstack-query-p6s1ru?file=package.json

Steps to reproduce

Try to serve with production config and you'll see the dev tools still appears

Expected behavior

Dev tools should only be included in builds with process.env.NODE_ENV === 'development'

How often does this bug happen?

Every time

Screenshots or Videos

Platform

• OS: MacOS
• Browser: Chrome

Tanstack Query adapter

angular-query

TanStack Query version

5.54.1

TypeScript version

5.3.3

Additional context

No response

[arnoud-dv]

Yes it would be nice to have this out of the box in the Angular dev tools as well. I did remove it from the docs while this feature isn't implemented.

Here's how you you could do a lazy load when in dev mode. Because it's lazily loaded it won't be in production bundles.

import { Component, OnInit, ViewContainerRef, inject, isDevMode } from '@angular/core';

@Component({...})
class AppComponent implements OnInit {
  viewContainerRef = inject(ViewContainerRef)

  async loadDevTools() {
    if (!isDevMode()) return
    this.viewContainerRef.clear()
    const { AngularQueryDevtools } = await import(
      '@tanstack/angular-query-devtools-experimental'
    )
    this.viewContainerRef.createComponent(AngularQueryDevtools)
  }

  ngOnInit() {
    void this.loadDevTools()
  }
}

[OmerGronich]

Yes it would be nice to have this out of the box in the Angular dev tools as well. I did remove it from the docs while this feature isn't implemented.

I tried to check how React Query DevTools does it, but it's a bit magical, I couldn't find any code that checks for NODE_ENV === 'development'. How does the React Query Devtools achieve this, and is it possible to do the same thing for the Angular DevTools?

I'd love to contribute, just not sure where to start.

[TkDodo]

It's done with a separate development entry in package.json exports:

• https://github.com/TanStack/query/blob/0f86b4d2fdc07ba9ddda3fd308018bf133fd21de/packages/solid-query-devtools/package.json#L42

[riccardoperra]

I think the @defer syntax might resolve this, angular automatically detects the module to lazy load.

@defer when(isDevMode) {
 <angular-query-devtools-experimental/>
}

This library works with angular17+ so defer is available for everyone

[arnoud-dv]

This library works with angular17+ so defer is available for everyone

It's Angular 16

[arnoud-dv]

I'm working on a provider for the developer tools:

provideAngularQuery(new QueryClient(), withDeveloperTools())

It uses Angular isDevMode to load the developer tools only in development mode. This default behaviour is overridable but in most cases all you'd need to do is just add withDeveloperTools(). I hope to finish this next week.

[OmerGronich]

I'm working on a provider for the developer tools:

provideAngularQuery(new QueryClient(), withDeveloperTools()) It uses Angular isDevMode to load the developer tools only in development mode. This default behaviour is overridable but in most cases all you'd need to do is just add withDeveloperTools(). I hope to finish this next week.

That sounds fantastic! Will there be a way to programmatically control the visibility of the dev tools? In our current setup, we lazy-load the component and conditionally render it based on a developer's action, like pressing a keyboard shortcut. It would be great if we could show or hide the dev tools explicitly in a similar manner.

Maybe something like:

provideAngularQuery(new QueryClient(), withDeveloperTools({
  visibilityControl: {
    default: false,
    toggleShortcut: 'Ctrl+Shift+D'
  }
}))

[arnoud-dv]

Will there be a way to programmatically control the visibility of the dev tools? In our current setup, we lazy-load the component and conditionally render it based on a developer's action, like pressing a keyboard shortcut. It would be great if we could show or hide the dev tools explicitly in a similar manner.

Yes that's on my todo list for the new Angular developer tools. In particular in production mode I can imagine it's useful to be able to load the tools after user input such as the keyboard shortcut you mentioned and to be able to programmatically control that.

For React ReactQueryDevToolsPanel was recently introduced. Maybe we can have this for Angular too to support this, but ideally through a provider. Or it could be added to withDeveloperTools but I need to think about the API.

I do want to get rid of the dev tools component as it's the only compiled code in the adapter. It's easier to support multiple Angular versions if we don't rely on the Angular compiler.