Angular 5项目基于universal-starter实现四级嵌套路由预渲染问询

我之前也用universal-starter折腾过类似的预渲染需求，给你梳理下具体步骤，应该能解决你的问题：

1. 把SSR模式切换为预渲染模式 #

首先，universal-starter默认是服务端渲染，我们需要调整为预渲染模式。你可以在项目里创建一个prerender.ts文件（或者修改现有脚本），利用@angular/platform-server里的renderModuleFactory来实现静态HTML生成。

核心思路是：

• 加载Angular的服务器模块工厂
• 定义要预渲染的完整路由列表（后面会讲怎么生成这个列表）
• 遍历每个路由，调用渲染方法，把生成的HTML保存到对应目录下

2. 生成完整的预渲染路由列表 #

因为你的路由是四级嵌套，每个层级的ID都来自后端API，所以得先写个小脚本（用Node.js就行）批量获取所有可能的路由组合：

• 先调用后端API获取所有分类ID
• 遍历每个分类ID，获取该分类下的子分类ID
• 接着遍历每个子分类ID，获取对应的活动ID
• 最后遍历每个活动ID，获取对应的票务ID
• 把这些ID拼接成完整的路由字符串，比如/category/1/subcategory/1/event/1/ticket/1，收集到一个数组里

举个简单的Node.js脚本示例（你可以根据自己的API接口调整）：

const axios = require('axios');
const fs = require('fs');

async function generateRoutes() {
  const routes = [];
  // 获取所有分类数据
  const categories = await axios.get('你的后端API地址/categories').then(res => res.data);
  for (const category of categories) {
    // 获取当前分类下的子分类
    const subcategories = await axios.get(`你的后端API地址/category/${category.id}/subcategories`).then(res => res.data);
    for (const subcategory of subcategories) {
      // 获取当前子分类下的活动
      const events = await axios.get(`你的后端API地址/subcategory/${subcategory.id}/events`).then(res => res.data);
      for (const event of events) {
        // 获取当前活动下的票务
        const tickets = await axios.get(`你的后端API地址/event/${event.id}/tickets`).then(res => res.data);
        for (const ticket of tickets) {
          routes.push(`/category/${category.id}/subcategory/${subcategory.id}/event/${event.id}/ticket/${ticket.id}`);
        }
      }
    }
  }
  // 把路由列表保存到文件，方便预渲染脚本读取
  fs.writeFileSync('prerender-routes.json', JSON.stringify(routes));
}

generateRoutes();

3. 配置预渲染脚本生成HTML #

修改你的prerender.ts（或者新建），读取刚才生成的路由列表，逐个渲染并保存HTML：

• 首先加载Angular的服务器模块和模块工厂
• 读取prerender-routes.json里的路由数组
• 遍历每个路由，使用renderModuleFactory渲染出HTML字符串
• 根据路由路径创建对应的目录（比如dist/category/1/subcategory/1/event/1/ticket/1），然后把HTML写入该目录下的index.html

关键提醒：预渲染时，你的组件要确保数据在渲染前已经获取完成。最好用路由的resolve守卫来提前获取数据，这样预渲染的时候能拿到完整的数据再生成HTML，避免出现空内容。比如给每个路由配置resolve，在resolve里调用API获取对应数据，组件直接从activatedRoute.data里拿数据即可。

4. 调整打包脚本 #

在package.json里添加预渲染的命令，比如：

"scripts": {
  // ...其他现有命令
  "prerender": "node generate-routes.js && ts-node prerender.ts"
}

这样运行npm run prerender就能先生成路由列表，再批量生成所有预渲染的HTML文件了。

额外注意事项 #

• 确保你的Angular 5项目和universal-starter的依赖版本兼容，避免出现版本冲突
• 预渲染时的API请求要确保能在构建环境访问到后端（如果是本地构建，要确保后端服务处于运行状态）
• 如果路由数量很多，预渲染可能会花点时间，耐心等待即可

内容的提问来源于stack exchange，提问作者Puria Rad Jahanbani