Angular构建动态路由预渲染报错：缺少getPrerenderParams

你的esperimento/:id路由启用了预渲染，但Angular无法确定需要预渲染哪些具体的ID参数值，因此抛出该错误。以下是三种可行的解决办法：

方案1：修改路由的渲染模式（无需预渲染该路由） #

给带参数的路由添加renderMode配置，指定为客户端渲染或服务端渲染（不预渲染）：

import { Routes } from '@angular/router';
import { HomeComponent } from './pages/home/home.component';
import { ExperimentComponent } from './pages/experiment/experiment.component';

export const routes: Routes = [
  { path: '', component: HomeComponent },
  { 
    path: 'esperimento/:id', 
    component: ExperimentComponent,
    renderMode: 'client' // 可选值：'client' | 'server'
  }
];

方案2：配置预渲染参数（需要预渲染该路由） #

如果需要预渲染该路由的特定ID值，在服务器路由配置中定义getPrerenderParams函数返回参数列表。示例（修改server.ts）：

import { type ServerRoute } from '@angular/platform-server';

// 替换为你实际需要预渲染的ID列表
const targetExperimentIds = ['1', '2', '3'];

export const serverRoutes: ServerRoute[] = [
  {
    path: 'esperimento/:id',
    getPrerenderParams: () => targetExperimentIds.map(id => ({ id }))
  }
];

确保你的服务器启动逻辑关联了该serverRoutes配置。

方案3：全局禁用预渲染（项目无需预渲染） #

若整个项目不需要预渲染功能，修改angular.json中的构建配置，关闭预渲染：

{
  "projects": {
    "你的项目名称": {
      "architect": {
        "prerender": {
          "enabled": false
        }
      }
    }
  }
}

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