Changing the request route

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>> {
   ...