Generating Routes File for Angular Universal Prerender

In this blog post, I will show you how to generate a routes file for prerendering an Angular Universal application.

We will create a basic routes file and append routes dynamically from an XML sitemap ahead of running npm run prerender command when building the application.

Pre-requisites

This post assumes you already have an Angular Universal application. If this is not the case, add server-side rendering (SSR) capability to your Angular application by following this guide.

Once you add SSR, you can use npm run prerender command to prerender your application.

Benefits of prerendering

Prerendering with Angular Universal refers to the process of rendering an application’s content on the server side before sending it to the client.

This can help improve the performance of an Angular application, especially for users with slow internet connections or on devices with limited resources.

By pre-rendering the application’s initial state on the server and then serving the fully rendered HTML to the client, the client’s web browser can start rendering the page immediately, rather than having to wait for all of the necessary JavaScript to download and execute before the content is displayed.

This can lead to a faster time to first paint and a better user experience overall.

Prerender options

There are a few build options available to use with prerender command as outlined by official documentation.

These options are:

• Provide extra routes in the command line
• Provide routes using a file
• Prerender specific routes

A sitemap is likely to have a large number of URLs so we’ll provide routes using a file.

Modify prerender command

Open up package.json and update prerender command to use a routes file:

"prerender": "ng run myapp:prerender --routes-file routes.txt"Code language: JSON / JSON with Comments (json)

There is no need to manually create a routes.txt file because the script we’re about to write will automatically create it.

Generate routes file

We will retrieve urls from an XML sitemap using xml-sitemap-url-scraper package.

Install this package as a dev dependency so it does not ship with production bundle:

npm install xml-sitemap-url-scraper --save-devCode language: Bash (bash)

Using this package to retrieve URLs is pretty simple, just provide a direct link to your sitemap as shown below.

What you’ll get in return is a promise containing all of the URLs found in the sitemap.

const fs = require('fs');
const { sitemapUrlScraper } = require("xml-sitemap-url-scraper");

const url = "https://mysite.com/sitemap_index.xml";

sitemapUrlScraper([url])
    .then(urls => {
        const routes = urls
            .map(url => url.replace(new URL(url).origin, ""))
            .join('\r\n');

        fs.writeFile('routes.txt', '\r\n' + routes, err => {
            if (err) {
                console.error(err);
            }
        });
    })
    .catch(err => { console.log(err); })
Code language: JavaScript (javascript)

Since prerender command expects relative URL separated by a line break in the routes file, we’re post-processing the results before creating the file routes.txt.

You’ll want to save this script to the root of your project and run using node in the command line:

node route-fetcher.js

Processing XML Sitemap:  https://mysite.com/sitemap_index.xml
Processing XML Sitemap:  https://mysite.com/post-sitemap.xml
Processing XML Sitemap:  https://mysite.com/page-sitemap.xml
Processing XML Sitemap:  https://mysite.com/category-sitemap.xmlCode language: Bash (bash)

You would ideally run this script as part of your continuous delivery pipeline, before prerendering the application.

Your routes.txt will be populated with all the links specified in your sitemap.

Conclusion

Hopefully this post helped you with prerendering the pages of your Angular application using a routes file.

What do you think? Let me know in the comments below!