-
-
Notifications
You must be signed in to change notification settings - Fork 2.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Angular query devtools are included in production builds #8018
Comments
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()
}
} |
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'. I'd love to contribute, just not sure where to start. |
It's done with a separate development entry in package.json exports:
|
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 |
|
I'm working on a provider for the developer tools: provideAngularQuery(new QueryClient(), withDeveloperTools()) It uses Angular |
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'
}
})) |
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 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. |
Describe the bug
Unlike the React Query DevTools which are only included in development builds, Angular Query does not seem to have that logic.
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
Tanstack Query adapter
angular-query
TanStack Query version
5.54.1
TypeScript version
5.3.3
Additional context
No response
The text was updated successfully, but these errors were encountered: