Loading...
Loading...
ALWAYS use when working with Angular HttpClient, HTTP requests, interceptors, error handling, or API communication in Angular applications.
npx skill4agent add oguzhan18/angular-ecosystem-skills angular-httpprovideHttpClient(withInterceptors([...]))withFetchwithInterceptorsFromDiAbortSignal// ✅ Modern functional interceptor
export const authInterceptor: HttpInterceptorFn = (req, next) => {
const authService = inject(AuthService);
const token = authService.getToken();
if (token) {
const authReq = req.clone({
setHeaders: { Authorization: `Bearer ${token}` }
});
return next(authReq);
}
return next(req);
};
// Register
export const appConfig: ApplicationConfig = {
providers: [
provideHttpClient(withInterceptors([authInterceptor]))
]
};// Error interceptor with retry
export const errorInterceptor: HttpInterceptorFn = (req, next) => {
return next(req).pipe(
catchError((error: HttpErrorResponse) => {
if (error.status === 401) {
inject(Router).navigate(['/login']);
}
return throwError(() => error);
})
);
};import { retry, delay, catchError } from 'rxjs/operators';
http.get('/api/data').pipe(
retry({ count: 3, delay: 1000 })
);const cacheToken = new HttpContextToken<boolean>(() => false);
export const cacheInterceptor: HttpInterceptorFn = (req, next) => {
if (req.context.get(cacheToken)) {
// Check cache
}
return next(req);
};
// Usage
http.get('/api/data', {
context: new HttpContext().set(cacheToken, true)
});interface User {
id: number;
name: string;
}
http.get<User>('/api/user/1').subscribe(user => {
console.log(user.name); // TypeScript knows the type
});observe: 'response'http.get('/api/data', { observe: 'response' }).subscribe(response => {
console.log(response.headers);
console.log(response.body);
});@Injectable()
export class GlobalErrorHandler implements ErrorHandler {
handleError(error: Error) {
// Log to error tracking service
console.error(error);
}
}
// Register
provideErrorHandler(GlobalErrorHandler)withCredentialshttp.get('/api/data', { withCredentials: true });