How to pass request parameters to an Angular component in SSR (Angular 18) and view logs in the browser?

I am working with Angular SSR (Server-Side Rendering) in Angular 18, and I need to pass the request parameters (e.g., headers, protocol, etc.) to my component. I am able to log the request object in the terminal during server-side rendering, but I cannot see the logs in the browser’s console.

Here’s how I’m currently passing the request parameter to the component:

Server-Side Code:

javascript

server.get('**', (req, res, next) => {
  console.log('here');
  const { protocol, originalUrl, baseUrl, headers } = req;

  commonEngine
    .render({
      bootstrap: AppServerModule,
      documentFilePath: indexHtml,
      url: `${protocol}://${headers.host}${originalUrl}`,
      publicPath: browserDistFolder,
      providers: [
        { provide: APP_BASE_HREF, useValue: baseUrl },
        { provide: 'REQUEST', useValue: req },
        { provide: 'ORIGIN', useValue: 'example.com' }
      ],
    })
    .then((html) => res.send(html))
    .catch((err) => next(err));
});

Component Code:

typescript

constructor(
  private activatedRoute: ActivatedRoute,
  private sanitizer: DomSanitizer,
  private businessService: BuisnessService,
  private location: Location,
  private router: Router,
  @Optional() @Inject("REQUEST") private request: any,
  @Inject(PLATFORM_ID) private platformId: Object
) {
  console.log('req.headers', this.request);
  this.getDomainInfo();
}

Problem:

• I can see the request object logged in the terminal (during SSR) but not in the browser console.
• I know that I can use isPlatformBrowser to conditionally execute browser-side logic, but the page source shows nothing in the HTML response which comes frrom api. I need to access the request object in ts file to get hostname and send it to api to get the response and render it on html file