Angular Universal 19混合SSG/SSR无法提供静态文件及路由疑问

一、修复静态文件优先返回的配置问题 #

你的核心问题是server.ts未优先读取预渲染的静态HTML，直接走了SSR流程。需要调整中间件顺序，确保静态文件服务逻辑放在SSR渲染逻辑之前，修改后的server.ts示例如下：

import { APP_BASE_HREF } from '@angular/common';
import { CommonEngine } from '@angular/ssr';
import express from 'express';
import * as fs from 'node:fs';
import { fileURLToPath } from 'node:url';
import { dirname, join, resolve } from 'node:path';
import { AppServerModule } from './src/main.server';

const app = express();
const serverDistFolder = dirname(fileURLToPath(import.meta.url));
const browserDistFolder = resolve(serverDistFolder, '../browser');
const indexHtml = join(serverDistFolder, 'index.server.html');

// 优先配置静态文件服务，指定browser目录为静态资源根
app.use(express.static(browserDistFolder, {
  maxAge: '1y',
  index: false, // 禁用自动返回index.html，手动控制路由匹配
}));

const commonEngine = new CommonEngine();

app.get('*', async (req, res) => {
  try {
    // 检查当前请求路径是否存在预渲染的静态HTML文件
    const prerenderedHtmlPath = join(browserDistFolder, req.path, 'index.html');
    await fs.promises.access(prerenderedHtmlPath);
    // 存在则直接返回静态文件
    res.sendFile(prerenderedHtmlPath);
  } catch (err) {
    // 静态文件不存在时，走SSR/CSR逻辑
    const { protocol, originalUrl, baseUrl, headers } = req;

    commonEngine
      .render({
        bootstrap: AppServerModule,
        documentFilePath: indexHtml,
        url: `${protocol}://${headers.host}${originalUrl}`,
        publicPath: browserDistFolder,
        providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
      })
      .then((html) => res.send(html))
      .catch((err) => {
        console.error(err);
        res.status(500).send('Internal Server Error');
      });
  }
});

const port = process.env['PORT'] || 4000;
app.listen(port, () => {
  console.log(`Node Express server listening on http://localhost:${port}`);
});

修改后，请求/home或/about会直接返回预渲染的静态HTML；请求/checkout时因无静态文件，自动进入SSR/CSR流程。

二、混合模式的服务方式确认 #

1. 构建阶段：你已正确配置serverRoutes指定预渲染路由，Angular 19会自动生成对应静态文件，这一步无需调整。
2. 服务阶段：使用修改后的server.ts启动服务，原serve:ssr:unitest命令可继续使用，只需确保命令指向修改后的文件。
3. 动态页面处理：若需纯客户端渲染checkout页面，可在SSR逻辑中返回仅包含应用壳的HTML，让Angular客户端接管路由；若需SSR，将RenderMode.Client改为RenderMode.Server即可。

三、混合模式下的路由链接处理 #

无需改用<a href>，Angular的routerLink可正常工作：

• 预渲染页面首次加载为静态HTML，Angular客户端初始化后，routerLink会触发客户端导航，不会重新请求服务器（强制刷新除外）。
• 动态页面的routerLink行为与纯SPA一致，客户端导航后按需加载组件或触发SSR。

若出现routerLink导致页面刷新的问题，检查两点：

• 所有路由均在Angular路由配置中，无未匹配路径。
• 应用客户端模块初始化正常，未破坏静态页面的Angular启动逻辑。

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