@emelie

Please note that the ngx-sitemap-generator library is specifically designed for server-side rendering (SSR) in Angular applications. If you are not using SSR, this library may not be suitable for your needs.

For more advanced and dynamic sitemap generation in Angular, you can follow these steps:

Install the xmlbuilder2 library, which helps in generating XML content: npm install xmlbuilder2
Create a new service for sitemap generation. You can use the Angular CLI to generate a new service using the following command: ng generate service Sitemap
In the sitemap.service.ts file, import the required dependencies and create a method to generate the sitemap:

import { Injectable } from '@angular/core';
import { SitemapStream } from 'sitemap';
import { createWriteStream } from 'fs';
import { join } from 'path';
import { DOCUMENT, ɵgetDOM } from '@angular/common';

@Injectable({
  providedIn: 'root'
})
export class SitemapService {
  constructor(@Inject(DOCUMENT) private document: any) {}

  generateSitemap(): void {
    const smStream = new SitemapStream({ hostname: 'https://example.com' });
    const path = join(this.document.location.origin, '/sitemap.xml');
    const writeStream = createWriteStream(path);

    smStream.pipe(writeStream);

    // Add URLs to your dynamic routes
    smStream.write({ url: '/' });
    smStream.write({ url: '/about' });
    // Add more URLs as required

    smStream.end();
    writeStream.on('finish', () => {
      console.log('Sitemap generated!');
    });
  }
}

This example shows how to generate a sitemap with two static routes (/ and /about). You can add more routes as required.

In your component or in your root AppModule, import and inject the SitemapService. Call the generateSitemap method to generate the sitemap. For example:

import { Component } from '@angular/core';
import { SitemapService } from './sitemap.service';

@Component({
  selector: 'app-root',
  template: '<h1>Hello, World!</h1>'
})
export class AppComponent {
  constructor(private sitemapService: SitemapService) {}

  ngOnInit() {
    this.sitemapService.generateSitemap();
  }
}

Run your Angular application. The sitemap will be created and saved as sitemap.xml in the root directory of your application.

Remember to update your robots.txt file to include the URL of the dynamic sitemap:

Sitemap: https://example.com/sitemap.xml

By following these steps, you can generate a sitemap dynamically in Angular 12 without relying on external libraries.

#angular