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