Angular 19：SSR + 延迟加载 - 有资源吗？

Question

我最近将我的 v17 生产应用程序升级到 v19 以实现部分 SSR。

升级顺利。好处：

Angular 添加了 ssr 并更新了 angular.json 和所需的服务器文件

我将路由添加到服务器路由并将其设置为服务器渲染。
我重构了“位置”、“窗口”和其他任何内容的所有实例。
构建过程没有错误并与 server.ts 一起服务
以这种方式提供服务时，应用程序运行得很好，没有回归
SSR 已完成，我使用 Angular 开发工具检查了它的“工作情况”。坏处：
只有 app.component 是服务器端渲染的。所有其他组件仍然由客户端渲染

我认为这个问题是由于延迟加载造成的。这是一个大型生产应用程序，所有内容都是延迟加载的。

如果您想提供帮助，我将在下面提供一些相关文件，但我真正的问题是：是否有任何有用的资源详细介绍如何在 Angular19 中设置 Lazyloading 和 SSR？

我发现很多资源基本上都在说“是的，你应该这样做，这很难”。或者就像“不要忘记在 main.server.ts 中为你的惰性路由进行更改”中的 2 行。但没有一个真正概述我应该做出哪些改变。

以下是一些相关文件，以防我只需要进行一点点更改。

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
    }
];

服务器.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';

Answer 1

我怀疑的是：在我看来，发生这种情况是因为水合没有正常发生。这就是为什么相关组件是使用 CSR 渲染的。您可能需要进行一些调整。这与延迟加载无关。

我为什么这么想？

当我将 CSR 项目转换为 SSR 时，我没有遇到延迟加载路由的问题。
Angular 混合渲染指南没有提到急切或延迟加载的路线作为具体问题。

您应该检查什么：

Angular 19：SSR + 延迟加载 - 有资源吗？

问题描述投票：0回答：1

1个回答

最新问题

Angular 19：SSR + 延迟加载 - 有资源吗？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1