Angular Universal动态路由预渲染配置问题咨询

@nguniversal/builders:prerender 本身不支持在routes配置项中直接使用通配符匹配动态路由，你之前配置的/product-category/*会被识别为字面量路径，不会自动展开为所有分类页路径，这是配置不生效的核心原因。
以下两种方案可按需选择： #

方案一：动态生成全量路由列表（官方推荐，稳定性最高） #

适合分类数据可批量拉取、需要确保所有分类页都被预渲染的场景，不需要修改SSR核心逻辑：

1. 在项目根目录新建路由生成脚本prerender-routes.ts，负责拉取全部分类标识、拼接完整预渲染路径、输出给prerender构建器使用：

import * as fs from 'fs';
import * as path from 'path';

/**
 * 替换为你项目实际的分类数据获取逻辑
 * 支持读本地JSON/Markdown文件、调用后台接口、读数据库等任意方式
 * 返回值为所有分类的title/slug数组
 */
async function getAllCategoryTitles(): Promise<string[]> {
  // 示例：读取本地静态分类JSON
  // const categoryData = JSON.parse(fs.readFileSync(path.join(__dirname, 'src/assets/categories.json'), 'utf-8'));
  // return categoryData.list.map(item => item.slug);

  // 示例：调用后台接口获取全部分类
  // const resp = await fetch('你的后台分类列表接口地址');
  // const list = await resp.json();
  // return list.data.map(item => item.titleSlug);

  // 测试占位数据，替换为实际逻辑即可
  return ['clothing', 'home-decor', 'accessories', 'handmade-crafts'];
}

async function generateRoutesConfig() {
  // 固定预渲染的基础路由
  const staticRoutes = ['/'];
  const categoryTitles = await getAllCategoryTitles();
  const categoryRoutes = categoryTitles.map(title => `/product-category/${title}`);
  const allRoutes = [...staticRoutes, ...categoryRoutes];

  // 按prerender要求的格式写入路由文件，每行一个完整路径
  fs.writeFileSync(
    path.join(__dirname, 'prerender-routes.txt'),
    allRoutes.join('\n')
  );
}

generateRoutesConfig();

2. 修改package.json的脚本配置，在执行预渲染前先运行路由生成脚本：

{
  "scripts": {
    // 保留原有其他脚本，新增以下两个配置
    "prerender:routes": "ts-node prerender-routes.ts",
    "prerender:build": "npm run prerender:routes && ng run seasonsIndia:prerender:production"
  }
}

3. 修改angular.json中的prerender配置，删除原来无效的通配符路径，改为读取生成的路由文件：

"prerender": {
  "builder": "@nguniversal/builders:prerender",
  "options": {
    "routesFile": "./prerender-routes.txt"
  },
  "configurations": {
    "production": {
      "browserTarget": "seasonsIndia:build:production",
      "serverTarget": "seasonsIndia:server:production"
    },
    "development": {
      "browserTarget": "seasonsIndia:build:development",
      "serverTarget": "seasonsIndia:server:development"
    }
  },
  "defaultConfiguration": "production"
}

后续执行npm run prerender:build即可自动拉取最新分类列表，完成所有页面的预渲染。 #

方案二：开启自动路由发现（零配置，适合页面内有完整跳转链路的场景） #

如果你的站点从首页开始，所有分类页都能通过页面内的routerLink/a标签跳转到，可以直接开启prerender内置的爬虫能力，自动遍历所有站内链接完成预渲染，不需要手动维护路由列表：
直接修改angular.json的prerender配置，加上discoverRoutes参数即可：

"prerender": {
  "builder": "@nguniversal/builders:prerender",
  "options": {
    "routes": ["/"],
    "discoverRoutes": true
  },
  // 其余configurations、defaultConfiguration配置保持不变
}

该方案的局限性是没有任何入口链接的孤立页面不会被爬取到，适合页面内互链完善的站点。 #

注意事项 #

• 禁止在prerender的routes数组中配置任何通配符（*、:**等），构建器不会做通配符解析，只会将其作为普通路径处理
• 预渲染生成的分类页文件会输出到dist/seasonsIndia/browser/product-category/[title]/index.html，部署时需要确保静态服务正确匹配该路径规则
• 如果分类总量超过千条，建议只预渲染访问量Top的头部分类，长尾分类保留运行时SSR渲染，避免构建时间过长
• 你当前server.ts配置无需额外修改，预渲染逻辑在构建阶段执行，和运行时SSR逻辑不冲突

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