Orqestria Download
← Back to the catalog

Skill · Version 1.0.0

Angular HTTP integration

Builds typed HTTP services with predictable parameters, interceptors, cancellation and actionable error states.

angular-http

See how it helps

When is it useful?

Use when Angular screens exchange data with an API and need consistent failure or retry behavior.

What does it help you do?

  • Separates transport data from screen models and encodes query parameters safely.
  • Uses immutable request changes and per-request interceptor context.
  • Distinguishes authentication, validation and network errors without blindly retrying writes.

Try asking this

Implement order search and saving with typed services, cancelled obsolete searches and field-level handling of rejected saves. Type two search terms quickly, then save with an invalid postcode. Only the latest results should appear, and the postcode error must preserve other edits.

Detailed documentation

Read the skill’s original instructions, examples and checks in their authored language.

Details…Show less

HTTP & Backend Integration

Keep HTTP communication in typed Angular services and interceptors with clear request lifecycles, error normalization and zero leaked server secrets.

1. Typed HttpClient services and parameters

  • Encapsulate API calls in dedicated domain/data services rather than calling HttpClient directly inside components.
  • Type every request and response (this.http.get<OrderSummaryDto>(...)) and map transport DTOs into domain models where the API shape differs from UI needs.
  • Build query strings with HttpParams (new HttpParams({ fromObject: ... })) or the params option object rather than manual string concatenation so special characters are properly URL-encoded.
  • Never embed server-side API keys or secrets in Angular environment files or client bundles.

2. Interceptors and HttpContext

  • Match the project's interceptor registration (withInterceptors([fn]) in provideHttpClient vs HTTP_INTERCEPTORS class providers).
  • Remember HttpRequest and HttpHeaders are immutable: always pass the result of req.clone({ setHeaders: ... }) to next(clonedReq).
  • Use HttpContext and HttpContextToken<T> to pass per-request metadata (such as skipping auth headers, suppressing global error toasts, or tagging cache policy) to interceptors cleanly without polluting URLs or headers.

3. Error handling, retries and cancellation

  • Normalize HttpErrorResponse (status 0 network/CORS failure, 401/403 auth, 422 validation errors, 5xx server failures) so components receive actionable error states.
  • Apply retry({ count, delay }) only to idempotent reads (GET) or transient network errors, never blindly to non-idempotent POST/PATCH mutations.
  • Understand that unsubscribing from HttpClient aborts the in-flight XHR/fetch request; use switchMap for reads/searches and exhaustMap or concatMap for mutations.

Before you finish

  • All HttpClient calls live in typed services and use HttpParams for query parameters.
  • Interceptors clone requests immutably and use HttpContextToken for per-request flags.
  • HttpErrorResponse statuses (0, 401/403, 422, 5xx) and cancellation are handled predictably.

Included files 2

  • LICENSE.txt
  • SKILL.md

About this skill package

angular-http

angular-http: Build maintainable Angular features with clear component boundaries, reactive state, forms and tested migrations.

Details…Show less

angular-http

angular-http: Build maintainable Angular features with clear component boundaries, reactive state, forms and tested migrations.

Includes the complete skill and its supporting files (2 files). The exact authored scope is preserved below.

Original skill description (source language)

Use when building or reviewing Angular HttpClient services, functional or class-based HTTP interceptors, request/response typing, HttpParams, HttpContext tokens, retry/timeout policies and API error handling.

Install the skill, review its source and trust settings, then enable it for the relevant project or agent.

Requirements

  • Orqestria installed on your computer.