Angular 19 SSR: The 'detail/:id' route uses prerendering and includes parameters, but 'getPrerenderParams' is missing

Question

I try to build Angular 19 SSR using ng build --configuration production --aot but get the following error:

[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'.

When I just serve the app locally I don't get this error, only when I try to build.

This is my routes array:

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

Now, I saw this in the documentation but not sure where to place the file and how to relate it to the entire app: https://angular.dev/guide/hybrid-rendering

  // app.routes.server.ts
  import { RenderMode, ServerRoute } from '@angular/ssr';
  export const serverRoutes: ServerRoute[] = [
  {
     path: 'post/:id',
     renderMode: RenderMode.Prerender,
     async getPrerenderParams() {
       const dataService = inject(PostService);
       const ids = await dataService.getIds(); // Assuming this returns ['1', '2', '3']
        return ids.map(id => ({ id })); // Transforms IDs into an array of objects for prerendering
      // This will prerender the paths: `/post/1`, `/post/2` and `/post/3`
   },
 },
];

Bottom line - how can I build my app ?

Thanks

Answer 1

The way I resolved it was by creating a file with all the different id's.

So in app.routes.ts I have:

 {
path: 'musician-details/:id',
component: MusiciansDetailsComponent,
title: 'Musicians Details'
},

Then I have another file app.routes.server.ts which looks something like:

import { RenderMode, ServerRoute } from '@angular/ssr';
import { routesIDs } from './shared/mocks/routes-ids';

export const serverRoutes: ServerRoute[] = [
{
   path: 'musician-details/:id',
   renderMode: RenderMode.Prerender,
   async getPrerenderParams() {
      const ids = routesIDs;
      return ids.map(id => ({ id }));
  },
 },
 {
   path: '**',
   renderMode: RenderMode.Prerender
  }
];

The routes-ids.ts would look something like:

export const routesIDs: string[] = [
'custom-id',
'custom-id1',
'etc.'
];

(where you put manually your id's - ideally should come from API, etc.)

Answer 2

The problem is most likely in your serverRoutes file. Currently, you are using RenderMode.Prerender. You should change it to RenderMode.Server. This should fix your issue.

export const serverRoutes: ServerRoute[] = [
  {
    path: '**',
    renderMode: RenderMode.Server
  }
];