Angular Universal构建后页面源码不渲染HTML问题求助

问题背景 #

已安装Angular Universal并完成构建，dist目录下存在browser和server文件夹，但启动构建产物后，页面源码中未渲染出HTML内容。尝试过网上所有可行方案仍未解决，项目基于Cuba模板。

服务器端代码（server.ts） #

import 'zone.js/node';

import { APP_BASE_HREF } from '@angular/common';
import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { existsSync } from 'fs';
import { join } from 'path';

import { AppServerModule } from './src/main.server';

// 导出Express应用以便无服务器函数使用
export function app(): express.Express {
  const server = express();
  const distFolder = join(process.cwd(), 'dist/cuba/browser');
  const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';
  console.log("hello" ,indexHtml)

  // 配置Express使用Angular Universal的express-engine
  server.engine('html', ngExpressEngine({
    bootstrap: AppServerModule,
  }));
  server.set('view engine', 'html');
  server.set('views', distFolder);

  // 从/browser文件夹提供静态文件
  console.log('Before serving static files');

  server.get('*.*', express.static(distFolder, {
    maxAge: '1y',
  }));

  console.log('Before handling other routes');

  // 使用Universal引擎处理所有其他路由
  server.get('*', (req, res) => {
    res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
  });

  return server;
}

function run(): void {
  const port = process.env.PORT || 4000;  // 直接使用PORT变量，无需方括号

  // 启动Node服务器
  const server = app();
  server.listen(port, () => {
    console.log(`Node Express server listening on http://localhost:${port}`);
  });
}

// 以下代码确保仅在非打包引用时运行服务器
declare const __non_webpack_require__: NodeRequire;
const mainModule = __non_webpack_require__.main;
const moduleFilename = mainModule && mainModule.filename || '';
if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
  run();
}

// 导出main.server模块供Angular Universal使用
export * from './src/main.server';

排查方向 #

• 检查AppServerModule导入是否正确，确认main.server.ts是否正确引导服务器端模块
• 验证构建命令是否正确，确保同时执行了浏览器端和服务器端构建（通常为npm run build:ssr）
• 确认index.html（或index.original.html）中存在<app-root>标签，这是服务器端渲染的挂载入口
• 检查启动命令是否指向正确的server产物文件，比如dist/cuba/server/main.js
• 查看服务器控制台日志，确认indexHtml变量是否正确获取到目标文件，以及res.render是否被触发
• 排查Cuba模板的特殊路由配置或拦截器，是否存在阻止Universal预渲染的逻辑

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