Angular Sitemap builder

This package provides an Angular CLI builder to generate a sitemap from prerendered pages when using @angular/ssr.

API docs

Getting started

Installing

ng add nxt-sitemap

Configuring the builder

{
    "build": { 
        "..."
    },
    "sitemap": {
        "builder": "nxt-sitemap:sitemap",
        "options": {
            "srcDirectory": "./dist/demo/browser",
            "baseUrl": "https://liquid-js.github.io/nxt-components/demo"
        }
    }
}

Generating the sitemap

ng run project:sitemap

Prerendered URLs in Angular

As described in #16051, Angular router, by default, removes trailing slashes from URLs; however, when serving prerendered pages most web servers add trailing slash which causes unneccessary redirects and degraded SEO performance. To avoid this, consider including the following code in your app configuration (based on #16051 (comment)):

import { DefaultUrlSerializer, UrlSerializer, UrlTree } from '@angular/router'

export class TrailingSlashUrlSerializer extends DefaultUrlSerializer {
    override serialize(tree: UrlTree): string {
        return this._withTrailingSlash(super.serialize(tree))
    }

    private _withTrailingSlash(url: string): string {
        const splitOn = url.indexOf('?') > -1 ? '?' : '#'
        const pathArr = url.split(splitOn)

        if (!pathArr[0].endsWith('/')) {
            const fileName: string = url.substring(url.lastIndexOf('/') + 1)
            if (fileName.indexOf('.') === -1) {
                pathArr[0] += '/'
            }
        }
        return pathArr.join(splitOn)
    }
}

export const appConfig: ApplicationConfig = {
    providers: [
        ...
        {
            provide: UrlSerializer,
            useClass: TrailingSlashUrlSerializer
        },
        ...
    ]
}