Why HttpInterceptor wasn't hit under Angular Universal mode?

Question

Simply put, I implemented a HttpInterceptor in Angular under Universal/SSR mode and did the registration, but none of the requests hit this interceptor.

First, I implemented translation.interceptor.ts with following source code:

@Injectable()
export class TranslateInterceptor implements HttpInterceptor {
  private readonly DEFAULT_PORT = 4200;
  private readonly PORT = process.env.PORT || this.DEFAULT_PORT;
  
  constructor(@Inject(REQUEST) private request: express.Request) {
    console.log('TranslateInterceptor()');
  }
  
  getBaseUrl(req: express.Request) {
    console.log('getBaseUrl()');
    const { protocol, hostname } = req;
    return this.PORT ?
       `${protocol}://${hostname}:${this.PORT}` :
       `${protocol}://${hostname}`;
  }

  intercept(request: HttpRequest<any>, next: HttpHandler) {
    console.log('intercept()');
    if (request.url.startsWith('./assets')) {
      const baseUrl = this.getBaseUrl(this.request);
      request = request.clone({
        url: `${baseUrl}/${request.url.replace('./assets','assets')}`
      });
    }
    return next.handle(request);
  }
}

Then I registered this interceptor in app.server.module.ts:

@NgModule({
  imports: [
    AppModule,
    ServerModule,
    ...
  ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: TranslateInterceptor, multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppServerModule {}

Finally, I made some changes to server.ts:

server.get('*', (req: express.Request, res: express.Response) => {
  console.log('server.get("*")');
  res.render('index', {
    req,
    providers: [ { provide: REQUEST, useValue: req }, ]
  });
});

As you may already found, I put some console.log() for monitoring, but only server.get("*") hits.

Would anybody share any experience with me?

Answer 1

From my experience the angular universal has two interceptors, one for the server and one for the browser. If you are trying to capture the requests which are being generated from the server end that is in order to get data from api or any such case than server-interceptor will kick in. But if you want to intercept the http requests being generated from the browser then you will have to inject the interceptor in the client module.

Here you have written the interceptor and injected it to the server-module hence creating a server-interceptor for http calls. If you want an interceptor for browser then simply add the interceptor to the app-module.

providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: BrowserStateInterceptor,
      multi: true
    }
  ], 

Further more if you want to make any changes to the request which are hitting your server.ts that is the server then you can simply use a middleware. It would be better if you clarify the question a bit more.