Angular HTTP - Quick Reference
Deep Knowledge: Use mcp__documentation__fetch_docs with technology: angular , topic: http for comprehensive documentation.
HttpClient Setup
// app.config.ts import { provideHttpClient, withInterceptors } from '@angular/common/http'; import { authInterceptor } from './core/interceptors/auth.interceptor'; import { errorInterceptor } from './core/interceptors/error.interceptor';
export const appConfig: ApplicationConfig = { providers: [ provideHttpClient(withInterceptors([authInterceptor, errorInterceptor])), ] };
Functional Interceptors (Angular 15+)
// Auth interceptor import { HttpInterceptorFn } from '@angular/common/http'; import { inject } from '@angular/core';
export const authInterceptor: HttpInterceptorFn = (req, next) => {
const token = inject(AuthService).getToken();
if (token) {
req = req.clone({
setHeaders: { Authorization: Bearer ${token} },
});
}
return next(req);
};
// Error interceptor export const errorInterceptor: HttpInterceptorFn = (req, next) => { return next(req).pipe( catchError((error: HttpErrorResponse) => { if (error.status === 401) { inject(Router).navigate(['/login']); } return throwError(() => error); }) ); };
// Loading interceptor export const loadingInterceptor: HttpInterceptorFn = (req, next) => { const loading = inject(LoadingService); loading.show(); return next(req).pipe(finalize(() => loading.hide())); };
Service Pattern with Error Handling
@Injectable({ providedIn: 'root' }) export class UserService { private http = inject(HttpClient); private baseUrl = '/api/users';
getUsers(): Observable<User[]> { return this.http.get<User[]>(this.baseUrl).pipe( retry({ count: 2, delay: 1000 }), catchError(this.handleError), ); }
create(user: CreateUserDto): Observable<User> { return this.http.post<User>(this.baseUrl, user).pipe( catchError(this.handleError), ); }
private handleError(error: HttpErrorResponse): Observable<never> { let message = 'An error occurred'; if (error.status === 0) { message = 'Network error'; } else if (error.status === 404) { message = 'Resource not found'; } return throwError(() => new Error(message)); } }
Typed Responses
// With observe: 'response' for full response getWithHeaders(): Observable<HttpResponse<User[]>> { return this.http.get<User[]>(this.baseUrl, { observe: 'response' }); }
// With params search(query: string, page: number): Observable<PaginatedResult<User>> { const params = new HttpParams() .set('q', query) .set('page', page.toString()); return this.http.get<PaginatedResult<User>>(this.baseUrl, { params }); }
Anti-Patterns
Anti-Pattern Why It's Bad Correct Approach
Class-based interceptors Verbose, deprecated Use functional HttpInterceptorFn
Not typing responses No compile-time checks Use http.get<Type>()
Subscribing in services Tight coupling Return observables, subscribe in components
No error handling Silent failures Use catchError in service
Quick Troubleshooting
Issue Likely Cause Solution
HTTP call not firing Forgot to subscribe Subscribe to the observable
Interceptor not running Not in providers Add to withInterceptors()
CORS error Backend config Configure CORS on server
Wrong content type Missing header HttpClient sets JSON by default