Angular 19：SSR与懒加载配置问题及相关资源咨询

我将生产环境中的Angular 17应用升级至Angular 19，目标是实现部分SSR（服务端渲染）。升级过程较为顺利：

• Angular自动添加SSR相关配置，更新了angular.json及所需服务端文件
• 已在服务端路由中配置对应路由并设置为服务端渲染模式
• 重构了所有使用location、window的代码
• 构建过程无报错，通过server.ts启动应用运行正常，无功能回归，且经Angular开发者工具验证SSR已“正常工作”

但存在核心问题：仅app.component实现了服务端渲染，其余所有组件仍为客户端渲染。我推测该问题源于懒加载机制——这是一个大型生产应用，所有组件均采用懒加载方式。

核心需求 #

是否有详细介绍Angular 19中懒加载与SSR配置方法的实用资源？

我已找到大量提及“应结合使用但实现难度大”或仅用寥寥数语提示“需修改main.server.ts配置懒加载路由”的资源，但均未明确说明具体需要进行哪些修改。

相关配置文件 #

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 'node:path';
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';

内容的提问来源于stack exchange，提问作者MindlessRouse