# Angular HTTP Client

> Best practices for HttpClient, Interceptors, and API interactions. Use when integrating HttpClient, writing interceptors, or handling API calls in Angular. (triggers: **/*.service.ts, **/*.interceptor.ts, HttpClient, HttpInterceptorFn, withInterceptors, httpResource, resource)

- Skill: `comeonoliver/angular-http-client` (Agent Skill)
- Install (CLI): `npx skillmds@latest add comeonoliver/angular-http-client`
- Raw SKILL.md: https://api.skillmd.com/api/skills/comeonoliver/angular-http-client/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- Author: ComeOnOliver (https://skillmd.com/u/comeonoliver)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/comeonoliver/angular-http-client

---


# HTTP Client

## **Priority: P1 (HIGH)**

## Principles

- **Functional Interceptors**: Use **HttpInterceptorFn** (e.g., `(req, next) => next(req.clone({ setHeaders: { Authorization: token } }))`). Clone requests with `req.clone(` — **class-based interceptors are deprecated**. Register via **withInterceptors([...])** in **provideHttpClient**.
- **Typed Responses**: Always type `http.post<T>()`, `http.get<T>()`. Use `inject(HttpClient)` in services (not constructor injection). Add **provideHttpClient(withInterceptors([...]), withFetch())** to `app.config.ts`.
- **Services**: **Encapsulate all HTTP calls in Services**. Never call `http` in Components.

## Signal-Based HTTP (Angular 17+)

Prefer **httpResource<T>()** over manual subscribe for reactive data loading — it auto-refetches when its signal inputs change:

```typescript
// Reactive: refetches automatically when userId() changes
userResource = httpResource<User>(() => `/api/users/${this.userId()}`);
// States: .isLoading() | .hasValue() | .error() | .value() | .reload()
```

Use **resource<T, P>({ request: () => params(), loader: ... })** for non-HTTP async operations with full **.isLoading()** lifecycle control.

## Guidelines

- **Caching**: Implement caching in interceptors or using `shareReplay(1)` in services.
- **Error Handling**: **Handle errors in the service** using `catchError` or global interceptors, not components. Use a **notification service** for display.
- **Context**: Use **HttpContext** to pass metadata to interceptors (e.g., **skip error handling** or specific caching rules).

## Anti-Patterns

- **No HTTP in Components**: **Encapsulate all HTTP calls in Services**.
- **No class-based interceptors**: Use `HttpInterceptorFn` functional interceptors.
- **No manual subscribe for GET**: Use **httpResource()** or `toSignal(http.get(...))` instead.

## References

- [Interceptors](references/interceptors.md)