Can't execute API while using interceptors

I'm learning about DI-based interceptors in Angular 20. When I ran my Angular app, the home page (that contains API to get products) was loading for a long time and I received no response on the browser.

I tried to add method withInterceptorsFromDi() into provideHttpClient() and provide interceptor class into app.config.ts, but I just received the same result.

interceptor:

import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { Observable } from "rxjs";
import { TokenService } from "../service/token.service";

@Injectable()
export class TokenInterceptor implements HttpInterceptor {
constructor(private tokenService: TokenService) { }

intercept(
req: HttpRequest<any>,
next: HttpHandler
): Observable<HttpEvent<any>> {
debugger
const token = this.tokenService.getToken();
if (token) {
req = req.clone({
setHeaders: {
Authorization: `Bearer ${token}`,
}
});
}
return next.handle(req);
}
}


app.config.ts:

import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
import { HTTP_INTERCEPTORS, provideHttpClient, withFetch, withInterceptorsFromDi } from '@angular/common/http';
import { TokenInterceptor } from './interceptors/token.interceptors';

export const appConfig: ApplicationConfig = {
providers: [
provideBrowserGlobalErrorListeners(),
provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(routes),
provideClientHydration(withEventReplay()),
provideHttpClient(
// withFetch(),
withInterceptorsFromDi(), // Enable DI-based interceptors
),
{
provide: HTTP_INTERCEPTORS,
useClass: TokenInterceptor,
multi: true,
}
]
};


service to call getProducts api:

import { Injectable } from '@angular/core';
import { environment } from '../environments/environment';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs';
import { HttpUtilService } from './http.util.service';
import { Product } from '../models/product';

@Injectable({
providedIn: 'root'
})
export class ProductService {
private apiGetProducts = `${environment.apiBaseUrl}/products`;

constructor(private http: HttpClient, private httpUtilService: HttpUtilService) {

}

getProducts(page: number, size: number): Observable<Product[]> {
const params = new HttpParams()
.set('page', page)
.set('limit', size);
return this.http.get<Product[]>(this.apiGetProducts, { params });
}
}

Continue reading...