Angular 17动态路由预渲染：大量未定义路由预渲染难题求解

1. 从数据源动态生成路由列表 #

如果你的动态路由基于固定数据集（比如API返回的ID列表、本地JSON文件），可以编写预处理脚本，先获取所有需要预渲染的路由，再注入到构建流程中：

• 编写routes-generator.js脚本，从数据源获取动态ID并生成完整路由：

const fs = require('fs');

// 替换为你的实际数据源逻辑（比如API请求、读取本地JSON）
async function getDynamicRouteIds() {
  // 示例：模拟从API获取ID列表
  // const res = await fetch('https://your-api/test-ids');
  // return res.json();
  return [5, 6, 89, 101, 203];
}

async function generateFullRoutes() {
  const baseRoutes = ['/', '/test'];
  const dynamicIds = await getDynamicRouteIds();
  const dynamicRoutes = dynamicIds.map(id => `/test/${id}`);
  return [...baseRoutes, ...dynamicRoutes];
}

// 将路由列表写入临时文件，供后续构建使用
generateFullRoutes().then(routes => {
  fs.writeFileSync('./prerender-routes.json', JSON.stringify(routes, null, 2));
});

• 执行构建前先运行脚本，再传入路由文件：

node routes-generator.js && ng run your-project-name:prerender --routes-file ./prerender-routes.json

2. 直接修改angular.json的预渲染配置（适合本地构建） #

如果不需要频繁变更数据源，也可以用脚本直接修改angular.json的prerender路由配置：

const fs = require('fs');
const angularConfigPath = './angular.json';

async function updatePrerenderConfig() {
  const config = JSON.parse(fs.readFileSync(angularConfigPath, 'utf8'));
  const projectConfig = config.projects['your-project-name'].architect.prerender.options;
  
  const dynamicIds = await getDynamicRouteIds(); // 复用上面的数据源函数
  projectConfig.routes = [
    '/',
    '/test',
    ...dynamicIds.map(id => `/test/${id}`)
  ];

  fs.writeFileSync(angularConfigPath, JSON.stringify(config, null, 2));
}

updatePrerenderConfig();

运行脚本后再执行预渲染命令即可。

3. 进阶：自定义预渲染Builder #

如果上述方法不够灵活，可以自定义Builder，在预渲染流程中动态拉取路由列表，替代默认的@nguniversal/builders:prerender：

• 创建自定义Builder，核心逻辑是先获取所有路由，再调用Angular官方的预渲染工具完成渲染。
• 在angular.json中替换prerender的builder为自定义实现。

注意事项 #

• 确保构建环境可以访问你的数据源（比如API在构建服务器的网络范围内）。
• 若路由数量极大，建议分批次预渲染，避免单次构建内存溢出。
• 预渲染生成的静态文件会占用磁盘空间，按需控制路由数量。

内容的提问来源于stack exchange，提问作者saajan-pixel