Lazy-load devtools in production

[zbarbuto]

The main query docs has a section on devtools in production that mentions lazy-loading the devtools when a special global function is called. This seems a lot more useful over having devtools completely unavailable in production.

I was wondering if there would be an Angular equivalent that would allow this?

[zbarbuto]

Managed to get the following working

export const appConfig: ApplicationConfig = {
  providers: [
    // ... other providers,
    makeEnvironmentProviders([
      {
        provide: APP_INITIALIZER,
        multi: true,
        deps: [],
        useFactory: prodDevToolsFactory,
      },
    ]),
  ],
};

function prodDevToolsFactory() {
  const client = injectQueryClient();
  return () => {
    // define our global `loadDevtools()` function to lazy-load query devtools
    (window as any).loadDevtools = () => {
      import('@tanstack/query-devtools').then((d) => {
        new d.TanstackQueryDevtools({
          client,
          queryFlavor: '@ngneat/query',
          version: '5',
          position: 'bottom',
          initialIsOpen: true,
          buttonPosition: 'bottom-right',
          onlineManager,
        }).mount(document.body);
      });
    };
  };
}

[zbarbuto]

Opened as a PR #149