How to access request body in an Angular Server Side Rendering application? - node.js

Question

I'm implementing an application to generate pdf using angular server side rendering. In there I want to use request body inside the angular components, this is the code sample I trying
server.ts file
server.post('/api/v1/pdf', (req, res) => {
// res.status(404).send('data requests are not yet supported');
res.render(indexHtml, { req, providers: [
{ provide: APP_BASE_HREF, useValue: req.baseUrl },
{ provide: PDFRequestService, useValue: req}
]
});
});
service to access request data
pdf-request.service.ts
#Injectable()
export class PDFRequestService {
constructor(#Inject(REQUEST) private request: Request) {}
get requestBody(): {workflowId: string} {
return this.request.body;
}
}
and import it to the app.server.module.ts
#NgModule({
imports: [
AppModule,
ServerModule,
],
providers: [
// Add server-only providers here.
PDFRequestService
],
bootstrap: [AppComponent],
})
export class AppServerModule {}
But I don't know how to access this PDFRequestService inside the angular application, when I import the service to app.module.ts file throwing an error saying null Injecttor for REQUEST, but it's in the express engine.
Does anyone knows how to access the request data inside angular application before rendering in server side?

Answer 1

Finally found a way to parse the request body to angular application.
In the route controller put the a provider like below(I was using body-parser to take in request body as json)
server.get('*', (req, res) => {
res.render(indexHtml, { req, providers: [
{ provide: APP_BASE_HREF, useValue: req.baseUrl },
{ provide: 'body', useValue: req.body}]
});
});
and inside AppModule we cam access it as below
export class AppModule {
constructor(
#Optional() #Inject('body') private body: any
) {
console.log(`body`, body);
}
That all. But there is another problem, when we use angular ssr rendering process happening two times, one is the server and other one in the client, so we will loose the data in client side. To solve that we can use below modules
ServerTransferStateModule
BrowserTransferStateModule
TransferState

Answer 2

You can simply pass the request from the server using providers.
server.get('*', async (req, res) => {
var data = 'any data';
res.render(indexHtml, {
req,
providers: [
{provide: APP_BASE_HREF, useValue: req.baseUrl},
{provide: 'REQUEST', useValue: req},
{provide: 'RESPONSE', useValue: res},
{provide: 'data', useValue: data},
],
});
});
Not only the request and response but you can also send custom data to angular components using the same process.
And in the component you can access these datas by using Inject()
constructor(
#Optional() #Inject(REQUEST) private request: Request<any>,
#Optional() #Inject(RESPONSE) private response: Response,
#Optional() #Inject('data') private data: any,
) {
}
This mechanism typically passes the data to angular components from the express server.