Angular 19: SSR + Lazyloading - Are there any resources?

I have recently upgraded my v17 production app to v19 for partial SSR.

The upgrade went well. The good:

Angular added ssr and updated the angular.json and needed server files

• 
  I added routes to the server routes and set them to server rendering.
  
  
• 
  I refactored all the instances of "location", "window" and whatever else.
  
  
• 
  The build process is error-free and serving with the server.ts
  
  
• 
  The app runs great when served this way, no regression
  
  
• 
  SSR is complete and I checked with the angular dev tools, its "working". The bad:
  
  
• 
  Only the app.component is Serverside rendered. All other components are still then client rendered
  

I think the issue is due to lazy loading. It's a large production app, and everything is lazy-loaded.

I'll include some relevant files below if you want to help, but my real ask is this: Are there any helpful resources that get into the details of how to setup Lazyloading and SSR in angular19?

I have found a LOT of resources that basically say "Yah, you should do it, its hard". Or like 2 lines on "Don't forget to make changes in your main.server.ts for your lazy routes". But none that actually outline what changes I am supposed to make.

Here are some of the relevant files in case I am supposed to make just one little change.

app.routes.server.ts

import { RenderMode, ServerRoute } from '@angular/ssr';

export const serverRoutes: ServerRoute[] = [
{
path: 'only/path/needed/ssr',
renderMode: RenderMode.Server,
},
{
path: '**',
renderMode: RenderMode.Server
}
];


server.ts

import { dirname, resolve } from 'nodeath';
import { fileURLToPath } from 'node:url';

import {
AngularNodeAppEngine,
createNodeRequestHandler,
isMainModule,
writeResponseToNodeResponse,
} from '@angular/ssr/node';
import express from 'express';

const serverDistFolder = dirname(fileURLToPath(import.meta.url));
const browserDistFolder = resolve(serverDistFolder, '../browser');

const app = express();
const angularApp = new AngularNodeAppEngine();

/**
* Example Express Rest API endpoints can be defined here.
* Uncomment and define endpoints as necessary.
*
* Example:
*
* app.get('/api/**', (req, res) => {
* // Handle API request
* });
*
*/

/**
* Serve static files from /browser
*/
app.use(
express.static(browserDistFolder, {
index: false,
maxAge: '1y',
redirect: false,
}),
);

/**
* Handle all other requests by rendering the Angular application.
*/
app.use('/**', (req, res, next) => {
angularApp
.handle(req)
.then((response) =>
response ? writeResponseToNodeResponse(response, res) : next(),
)
.catch(next);
});

/**
* Start the server if this module is the main entry point.
* The server listens on the port defined by the `PORT` environment variable, or defaults to 4000.
*/
if (isMainModule(import.meta.url)) {
const port = process.env.PORT || 4200;
app.listen(port, () => {
console.log(`Node Express server listening on http://localhost:${port}`);
});
}

/**
* The request handler used by the Angular CLI (dev-server and during build).
*/
export const reqHandler = createNodeRequestHandler(app);
app.module.server.ts

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { provideServerRoutesConfig } from '@angular/ssr';
import { AuthConfigService, AuthService } from '@auth0/auth0-angular';

import { AppComponent } from './app.component';
import { AppModule } from './app.module';
import { serverRoutes } from './app.routes.server';

@NgModule({
bootstrap: [AppComponent],
imports: [AppModule, ServerModule],

providers: [provideServerRoutesConfig(serverRoutes),
{
provide: AuthService,
useValue: {},
},
{ provide: AuthConfigService,
useValue: {} as any },],
})
export class AppServerModule {}


main.server.ts

export { AppServerModule as default } from './app/app.module.server';

Continue reading...