In our project so far, we have two services that make requests to the backend. If we analyze them, we see that they both point directly to the backend URL. This is not a good practice since, as the project scales and grows in complexity, errors can occur by pointing to the wrong URL. In addition to the need to change the host, we will need to change numerous files.
There are a few ways to handle this problem, but a very useful tool for this is the Angular interceptor. Let’s see it in practice starting with the Angular CLI, where we are going to create the new interceptor:
ng g interceptor shared/host
With the generated file, let’s create the intercept function:
@Injectable()
export class HostInterceptor implements HttpInterceptor {
intercept(
request: HttpRequest<unknown>,
next: HttpHandler
): Observable<HttpEvent<unknown>> {
const url = ‘http://localhost:3000’;
const resource = request.url;
if (request.url.includes(‘http’)) {
return next.handle(request);
}
const urlsReq = request.clone({
url: `${url}/${resource}`,
});
return next.handle(urlsReq);
}
}
In this function, we have the URL of the backend and, in the resource variable, we receive the original URL of the request that we want to intercept and modify. We use an if statement next because we want to avoid errors in case some service needs to call another API directly.
Finally, we create a new request object (this time, with the URL changed) and we pass this new object to the request flow. For this interceptor to be triggered by Angular, we need to add it to the providers array of the AppModule module:
@NgModule({
declarations: [AppComponent, ErrorPageComponent],
imports: [BrowserModule, AppRoutingModule, HttpClientModule],
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
{ provide: HTTP_INTERCEPTORS, useClass: HostInterceptor, multi: true },
],
bootstrap: [AppComponent],
})
export class AppModule {}
We will refactor our service to only care about the features they need, starting with the ExerciseSetsService service:
export class ExerciseSetsService {
private httpClient = inject(HttpClient);
private url = ‘diary’;
}
We follow this with the Authentication service:
export class AuthService {
private httpClient = inject(HttpClient);
private url = ‘auth/login’;
}
We can see that if we needed new services or changed the URL, the HTTP requests would not need to be refactored, as we created an interceptor to work on that.
Next, we’ll learn how to give our users a better experience if a request takes too long.