In Angular <19 I used such code to specify the providers:
// All regular routes use the Angular engine
server.get('**', (req, res, next) => {
const { protocol, originalUrl, baseUrl, headers } = req;
commonEngine
.render({
bootstrap,
documentFilePath: indexHtml,
url: `${protocol}://${headers.host}${originalUrl}`,
publicPath: distFolder,
providers: [
{ provide: APP_BASE_HREF, useValue: baseUrl },
{ provide: RESPONSE, useValue: res },
{ provide: REQUEST, useValue: req },
],
})
.then((html) => res.send(html))
.catch((err) => next(err));
});
but in Angular 19 there is another structure:
app.use('/**', (req, res, next) => {
angularApp
.handle(req)
.then((response) =>
response ? writeResponseToNodeResponse(response, res) : next(),
)
.catch(next);
});
I have tried to add the providers array in the second parameter of handle()
method, but it did not work for me.
I need to set providers for the REQUEST
token, which should be the req
object
In v19+ apps those token are set for you automatically by the framework.
In your app, you'll pull them from '@angular/core'
import { Component, inject REQUEST, } from '@angular/core';
@Component({...})
export class AppComponent {
constructor() {
const request = inject(REQUEST, { optional: true });
}
}
Make sure to inject is with optional: true
as this token will not be available in every context.
I have a working demo you can check: https://github.com/jeanmeche/ssr-v19