Muhammed Senussi
Muhammed Senussi
  • Muhammed Senussi
Prerendering Parameterised Routes in AngularAngular

Prerendering a blog or a documentation site in Angular is straightforward once you know which piece does the work, and the documentation is easy to read the wrong way.

What actually enumerates the URLs

The application builder discovers routes automatically, but only routes without parameters. A route like blog/:slug cannot be guessed, so it is skipped. Supplying getPrerenderParams on its own is not enough — the builder has to be told the route exists at all, which is what prerender.routesFile does.

Generate that file from the same source as your content. In my case a script reads the post data and writes both the routes file and the sitemap, so the two cannot disagree and drafts are excluded from both by the same filter.

Two things to check afterwards

  • Anything read from document.location during prerender gets the placeholder origin, not your domain. Canonical URLs and og:url must come from configuration.
  • Whatever is in index.html is in every prerendered page. A preload for a hero image that only exists on the landing page will be fetched on all of them.

2 Comments

  • Omar Haddad

    December 9, 2024

    I lost two days to exactly this. getPrerenderParams was never called and there is no warning telling you why.

    • Muhammed Senussi

      Muhammed Senussi

      AuthorDecember 9, 2024

      Silence is the worst failure mode. A log line saying "route blog/:slug has params but was not discovered" would save a lot of people a lot of time. Adding a console log inside getPrerenderParams is the quickest way to confirm whether it runs at all.

Leave a comment