如何将Angular 16 SSR中的ngExpressEngine迁移至Angular 17

步骤1：确认依赖（可选） #

如果项目升级后未自动安装@angular/ssr，执行以下命令补充依赖：

ng add @angular/ssr

步骤2：替换导入语句 #

将server.ts中原有的ngExpressEngine导入：

import { ngExpressEngine } from '@nguniversal/express-engine';

替换为CommonEngine的导入：

import { CommonEngine } from '@angular/ssr';

步骤3：重构引擎初始化与路由逻辑 #

删除原有的server.engine注册代码，改用CommonEngine实例化并处理渲染请求。

原代码片段：

server.engine(
    'html',
  ngExpressEngine({
    bootstrap: AppServerModule,
  })
);

server.get('*', (req, res) => {
  res.render('index', { req, providers: [{ provide: REQUEST, useValue: req }] });
});

修改后的代码：

// 实例化CommonEngine
const engine = new CommonEngine({
  bootstrap: AppServerModule,
});

// 处理所有路由请求
server.get('*', async (req, res, next) => {
  try {
    const html = await engine.render({
      bootstrap: AppServerModule,
      // 指定index.html的物理路径
      documentFilePath: join(DIST_FOLDER, 'browser', 'index.html'),
      url: req.url,
      // 静态资源目录路径
      publicPath: join(DIST_FOLDER, 'browser'),
      // 保留原有的请求相关providers
      providers: [{ provide: REQUEST, useValue: req }],
    });
    res.send(html);
  } catch (err) {
    // 错误传递给Express错误处理中间件
    next(err);
  }
});

关键说明 #

• CommonEngine不再通过Express的server.engine注册模板引擎，而是直接调用render方法生成HTML字符串后发送给客户端
• documentFilePath必须指向编译后browser目录下的index.html文件，确保路径与项目编译输出结构匹配
• 渲染逻辑改为异步处理，需用async/await包裹并捕获异常，避免请求挂起

内容的提问来源于stack exchange，提问作者Charlie-Greenman