@void-snippets/angular

Setup

provideVoidAngular, HttpClient configuration, and peer dependencies.

#What it does

provideVoidAngular registers TanStack Angular Query in your application. Call it once in app.config.ts, alongside provideHttpClient(...) for auth/CSRF/retry interceptors.

#Signature

typescript
function provideVoidAngular(config?: VoidAngularConfig): Provider[];

interface VoidAngularConfig {
  queryClient?:       QueryClient;       // bring your own pre-built client
  queryClientConfig?: QueryClientConfig; // or pass config, client is built internally
}

#Example — app.config.ts

typescript
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient, withFetch, withInterceptors } from '@angular/common/http';
import { provideVoidAngular } from '@void-snippets/angular';
import { authInterceptor } from './core/auth.interceptor';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),

    // Configure HttpClient once — every AngularResourceService subclass
    // inherits the interceptor chain automatically. withFetch() gives
    // OS-level cancellation when TanStack Query aborts a request.
    provideHttpClient(
      withFetch(),
      withInterceptors([authInterceptor]),
    ),

    provideVoidAngular({
      queryClientConfig: {
        defaultOptions: {
          queries:   { staleTime: 30_000, retry: 1 },
          mutations: { retry: 0 },
        },
      },
    }),
  ],
};

#Micro-frontend — isolated cache

typescript
// Each micro-frontend gets its own QueryClient — no shared cache with the host shell
bootstrapApplication(MfeRootComponent, {
  providers: [
    provideVoidAngular({ queryClient: new QueryClient() }),
  ],
});