Angular 19 SSR构建报错：带参数预渲染路由缺失getPrerenderParams

问题场景 #

使用ng build --configuration production --aot命令构建Angular 19 SSR应用时触发错误，本地启动应用则无此问题。

错误详情 #

[ERROR] The 'detail/:id' route uses prerendering and includes parameters, but 'getPrerenderParams' is missing. Please define 'getPrerenderParams' function for this route in your server routing configuration or specify a different 'renderMode'.

当前路由配置 #

export const routes: Routes = [{
   path: '',
   component: HomePageComponent,
   title: '',
}, {
   path: 'detail/:id',
   component: detailsComponent
}, {
  path: 'about',
  component: AboutComponent,
  title: 'About us'
  ... etc.
];

困惑点 #

看到官方的serverRoutes配置示例，但不清楚该文件的放置位置以及如何与整个应用关联。

解决步骤 #

1. 创建服务器路由配置文件 #

在src/app目录下新建app.routes.server.ts文件，根据需求选择以下两种方案之一：

方案A：保留预渲染并提供参数生成逻辑

适用于需要预渲染detail/:id所有实例的场景：

import { RenderMode, ServerRoute } from '@angular/ssr';
import { inject } from '@angular/core';
// 替换成你实际的数据服务路径
import { DetailService } from './services/detail.service';

export const serverRoutes: ServerRoute[] = [
  {
     path: 'detail/:id',
     renderMode: RenderMode.Prerender,
     async getPrerenderParams() {
       // 注入数据服务获取所有需要预渲染的ID
       const detailService = inject(DetailService);
       // 替换成实际获取ID列表的逻辑（比如调用API）
       const ids = await detailService.getAllDetailIds();
       // 将ID转换为参数对象数组，Angular会据此生成`/detail/1`、`/detail/2`等预渲染页面
       return ids.map(id => ({ id }));
     },
  },
];

方案B：修改渲染模式跳过预渲染

如果不需要预渲染detail/:id路由，直接修改渲染模式：

import { RenderMode, ServerRoute } from '@angular/ssr';

export const serverRoutes: ServerRoute[] = [
  {
     path: 'detail/:id',
     // 可选：Server（服务器端渲染）或 Client（客户端渲染）
     renderMode: RenderMode.Server,
  },
];

2. 关联服务器路由到应用 #

找到项目的服务器入口文件src/main.server.ts，修改配置将serverRoutes关联到路由提供器：

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideRouter, withServerRouting } from '@angular/router';
import { routes } from './app/app.routes';
// 导入刚创建的服务器路由
import { serverRoutes } from './app/app.routes.server';
import { provideServerRendering } from '@angular/platform-server';
import { provideClientHydration } from '@angular/platform-browser';
// 如果用了方案A，记得导入并提供数据服务
import { DetailService } from './app/services/detail.service';
import { provideHttpClient } from '@angular/common/http';

bootstrapApplication(AppComponent, {
  providers: [
    // 用withServerRouting关联服务器路由
    provideRouter(routes, withServerRouting(serverRoutes)),
    provideClientHydration(),
    provideServerRendering(),
    // 方案A需要添加的依赖：HTTP客户端和数据服务
    provideHttpClient(),
    DetailService,
  ],
});

3. 验证构建 #

重新执行构建命令：

ng build --configuration production --aot

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