HttpContextToken always false while using HttpInterceptorFn

I am implementing a loading spinner that runs for all my http requests via an HttpInterceptorFn using this blog post as a guide: https://blog.angular-university.io/angular-loading-indicator/

loading.interceptor.ts

export const loadingInterceptor: HttpInterceptorFn = (req, next) => {
const loadingSpinnerService = inject(LoadingSpinnerService);
console.log('SkipLoading: ', req.context.get(SkipLoading));
if (req.context.get(SkipLoading)) {
return next(req);
}
loadingSpinnerService.setIsLoading(true);
return next(req).pipe(
finalize(() => {
loadingSpinnerService.setIsLoading(false);
}),
);
};


HttpContextToken exported from the loading-spinner.service.ts

export const SkipLoading = new HttpContextToken<boolean>(() => false);


refreshToken API call where I wish to skip the spinner

refreshToken() {
return this.http.post<TokenResponse>(
this.apiUrl + '/Token/refresh/' + this.siteUserId$.value?.toString(),
{ context: new HttpContext().set(SkipLoading, true) },
);
}


Using console.log() I am noticing that my SkipLoading token is always false. Is there some difference in the implementation when using HttpInterceptorFn rather than HttpInterceptor class?

Continue reading...