Loading...
Loading...
ALWAYS use when working with Angular HTTP Interceptors, request/response transformation, auth interceptors, or error handling in HTTP calls.
npx skill4agent add oguzhan18/angular-ecosystem-skills angular-interceptorsHttpInterceptorFnexport 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);
};export const appConfig: ApplicationConfig = {
providers: [
provideHttpClient(
withInterceptors([authInterceptor, logInterceptor])
)
]
};export const errorInterceptor: HttpInterceptorFn = (req, next) => {
return next(req).pipe(
catchError((error: HttpErrorResponse) => {
if (error.status === 401) {
inject(Router).navigate(['/login']);
}
return throwError(() => error);
})
);
};provideHttpClient(
withInterceptors([loggingInterceptor, authInterceptor, errorInterceptor])
)const CACHE_KEY = new HttpContextToken<boolean>(() => false);
export const cacheInterceptor: HttpInterceptorFn = (req, next) => {
if (req.context.get(CACHE_KEY)) {
// Check cache
}
return next(req);
};
// Usage
http.get('/api/data', { context: new HttpContext().set(CACHE_KEY, true) });export const transformInterceptor: HttpInterceptorFn = (req, next) => {
if (req.url.includes('/api/')) {
const transformed = req.clone({
setHeaders: { 'X-Custom-Header': 'value' }
});
return next(transformed);
}
return next(req);
};export const responseInterceptor: HttpInterceptorFn = (req, next) => {
return next(req).pipe(
map(event => {
if (event instanceof HttpResponse) {
return event.clone({ body: transformData(event.body) });
}
return event;
})
);
};