During the build process error related to prerendering a dynamic route (esperimento/:id)

I have an Angular project, and I'm attaching the app.routes.ts file. When I test it with ng serve, the app seems to work perfectly, but when I try to build it I always get this error:

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

I can't find a solution. Can anyone help me?

// app/app.routes.ts
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 }
];

Answer

Control what is prerendered:

As mentioned in the documentation.

Parameterized routes

For each route with RenderMode.Prerender, you can specify a getPrerenderParams function. This function lets you control which specific parameters produce separate prerendered documents.

So specify an API call that gets all the IDs that you want to prerender.

// app.routes.server.ts
import { RenderMode, ServerRoute } from '@angular/ssr';
export const serverRoutes: ServerRoute[] = [
  {
    path: 'esperimento/:id',
    component: ExperimentComponent,
    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: `/esperimento/1`, `/esperimento/2` and `/esperimento/3`
    },
  },
];

If you do not need Prerendering, just configure the route as a client or server only route (Without prerendering).

Configuring server routes

export const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'esperimento/:id', component: ExperimentComponent, renderMode: RenderMode.Server, }, // render on server and client
  // { path: 'esperimento/:id', component: ExperimentComponent, renderMode: RenderMode.Client, } // render on  client only
];

---

Specify routes to prerender:

Another approach, is to configure the routes you want to prerender.

Prerendering parameterized routes

routes.txt

/products/1
/products/555

Maybe you have discoverRoutes enabled which is causing this route to prerender.

Build options for prerender

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "prerender": {
              "discoverRoutes": false // <- this line might be the problem.
            }
          }
        }
      }
    }
  }

}