I attempted to share my request and response object with the Angular application by defining Providers in the "server.ts" file.
However, when injecting them into app.component, they always appear undefined regardless of whether I am in the server or client context.
Can anyone provide insight on how to resolve this issue? Unfortunately, there is a lack of information available.
I did not run the app in dev mode as Angular currently disregards server.ts in dev mode! - Instead, I built it and served the Express server.
The tokens are defined as follows:
export const REQUEST = new InjectionToken<Request>('REQUEST');
export const RESPONSE = new InjectionToken<Response>('RESPONSE');
My server setup is like this:
// All regular routes use the Angular engine
server.get('*', (req, res, next) => {
console.log('HI HI HI hi');
const { protocol, originalUrl, baseUrl, headers } = req;
/*const transferState = inject(TransferState);
transferState.set(makeStateKey<any>('t'), JSON.stringify('hi'));*/
commonEngine
.render({
bootstrap,
documentFilePath: indexHtml,
url: `${protocol}://${headers.host}${originalUrl}`,
publicPath: browserDistFolder,
providers: [
{ provide: RESPONSE, useValue: res },
{ provide: REQUEST, useValue: req }
],
})
.then((html) => res.send(html))
.catch((err) => next(err));
});
The Client injects the response object like so:
constructor(@Optional() @Inject(RESPONSE) private response: Response) {
super();
}
ngOnClientInit() {
console.log('RESPONSE', this.response);
console.log('I am on client', this.communicationService.getValue('data'), this.token);
}
Unfortunately, no matter what attempts I make, my Response remains null.
I have searched via Google and reviewed the official documentation.
I am hopeful that the token will eventually return a value!