Installation

Install and configure Angular Query in your Angular application

This guide walks you through installing and setting up Angular Query in your Angular application.

Prerequisites

Before installing Angular Query, ensure your project meets these requirements:

• Angular 16+ - Angular Query uses signals and modern Angular features
• TypeScript 5.0+ - Required for full type inference
• Node.js 16+ - For package installation

Installation

Advanced Configuration

Using InjectionToken

For advanced use cases like lazy loading, you can provide the QueryClient using an InjectionToken:

query-client.ts

import { InjectionToken } from '@angular/core'
import { QueryClient } from '@tanstack/angular-query-experimental'

export const MY_QUERY_CLIENT = new InjectionToken<QueryClient>('MyQueryClient', {
  factory: () => new QueryClient({
    defaultOptions: {
      queries: {
        staleTime: 1000 * 60 * 5,
      },
    },
  }),
})

Then use it in lazy loaded routes:

app.routes.ts

import { Routes } from '@angular/router'
import { provideTanStackQuery } from '@tanstack/angular-query-experimental'
import { MY_QUERY_CLIENT } from './query-client'

export const routes: Routes = [
  {
    path: 'dashboard',
    loadComponent: () => import('./dashboard/dashboard.component'),
    providers: [
      provideTanStackQuery(MY_QUERY_CLIENT)
    ]
  }
]

Using an InjectionToken allows TanStack Query to be excluded from the main application bundle and only loaded with specific routes.

Multiple QueryClient Instances

You can provide different QueryClient instances for different parts of your application:

lazy-route.ts

import { Route } from '@angular/router'
import { 
  provideTanStackQuery,
  QueryClient 
} from '@tanstack/angular-query-experimental'

export const route: Route = {
  path: 'admin',
  loadComponent: () => import('./admin/admin.component'),
  providers: [
    // Separate QueryClient for admin section
    provideTanStackQuery(
      new QueryClient({
        defaultOptions: {
          queries: {
            staleTime: 0, // Always fresh for admin data
            gcTime: 0, // No caching
          },
        },
      })
    )
  ]
}

Server-Side Rendering (SSR)

For Angular Universal applications, ensure the QueryClient is provided correctly:

app.config.server.ts

import { mergeApplicationConfig } from '@angular/core'
import { provideServerRendering } from '@angular/platform-server'
import { 
  provideTanStackQuery,
  QueryClient 
} from '@tanstack/angular-query-experimental'
import { appConfig } from './app.config'

const serverConfig: ApplicationConfig = {
  providers: [
    provideServerRendering(),
    // Provide a fresh QueryClient for each SSR request
    provideTanStackQuery(new QueryClient({
      defaultOptions: {
        queries: {
          staleTime: Infinity, // Don't refetch during SSR
        },
      },
    }))
  ]
}

export const config = mergeApplicationConfig(appConfig, serverConfig)

For SSR, create a new QueryClient instance per request to avoid sharing state between users.

Verify Installation

Create a simple component to verify the installation:

test.component.ts

import { Component } from '@angular/core'
import { injectQuery } from '@tanstack/angular-query-experimental'

@Component({
  selector: 'app-test',
  standalone: true,
  template: `
    <div>
      @if (query.isPending()) {
        <p>Loading...</p>
      }
      @if (query.isSuccess()) {
        <p>Data: {{ query.data() }}</p>
      }
    </div>
  `
})
export class TestComponent {
  query = injectQuery(() => ({
    queryKey: ['test'],
    queryFn: async () => {
      await new Promise(resolve => setTimeout(resolve, 1000))
      return 'Angular Query is working!'
    }
  }))
}

If you see “Angular Query is working!” after 1 second, your installation is complete!

Troubleshooting

Error: “No QueryClient found”

This error occurs when provideTanStackQuery is not in the provider tree. Ensure you’ve added it to your application config or module providers.

Error: “injectQuery must be called in an injection context”

Angular Query hooks must be called during component/service construction. See the injection context documentation for solutions.

TypeScript Errors

Ensure you’re using TypeScript 5.0 or higher. Update your tsconfig.json:

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["ES2022", "dom"],
    "strict": true
  }
}

Next Steps

Quick Start

Build your first query

Queries Guide

Learn about queries in depth

DevTools

Set up debugging tools

API Reference

Explore the full API