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

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

Continue reading...