Início / coding / Perguntas / 79565986
Accepted
Pierpaolo Croce
Asked: 2025-04-10 15:26:27 +0800 CST

Durante o processo de construção, erro relacionado à pré-renderização de uma rota dinâmica (esperimento/:id)

  • 772

Tenho um projeto Angular e estou anexando o app.routes.tsarquivo. Quando testo com ng serve, o aplicativo parece funcionar perfeitamente, mas quando tento compilá-lo, sempre recebo este erro:

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

Não consigo encontrar uma solução. Alguém pode me ajudar?

// 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 }
];
angular

1 respostas

  1. Best Answer

    Controle o que é pré-renderizado:

    Conforme mencionado na documentação.

    Rotas parametrizadas

    Para cada rota com RenderMode.Prerender, você pode especificar uma função getPrerenderParams. Essa função permite controlar quais parâmetros específicos produzem documentos pré-renderizados separados.

    Então especifique uma chamada de API que obtenha todos os IDs que você deseja pré-renderizar.

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

    Se você não precisar Prerendering, basta configurar a rota como uma rota somente cliente ou servidor (sem pré-renderização).

    Configurando rotas do servidor

    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
];

    Especifique rotas para pré-renderização:

    Outra abordagem é configurar as rotas que você deseja pré-renderizar.

    Pré-renderização de rotas parametrizadas

    rotas.txt

    /products/1
/products/555

    Talvez você tenha discoverRouteshabilitado o que está fazendo com que essa rota seja pré-renderizada.

    Opções de construção para pré-renderização

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

    }

    • 0

relate perguntas