How to let sitemap generator fully crawl Angular router for SPA?

Question

I am trying to generate a sitemap for my webpage.

The sitemap generators online only show me a homepage on xml file.

<?xml version="1.0" encoding="UTF-8"?>
-<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
-<url>
<loc>http://margvel.com</loc>
<priority>0.5</priority>
</url>
</urlset>

my webpage meanwhile has several routes in angular.

to see the webpage you could go to margvel.com

I used couple of sitemap generators.

xml-sitemap and botmap

I checked botmap, because it should have SPA support.

The links I want to create sitemap use material design and routerlink.

the code looks like this.

          <mat-list-item (click)="snav.close()" routerLink="/Projects"><mat-icon style="margin-left: 7px;">code</mat-icon><a style="margin-left: 25px;" >Projects</a></mat-list-item>
          <mat-list-item (click)="snav.close()" routerLink="/Jobs"><mat-icon style="margin-left: 7px;">work</mat-icon><a style="margin-left: 25px;" ></a>Work Experience</mat-list-item>
          <mat-list-item (click)="snav.close()" routerLink="/Education"><mat-icon style="margin-left: 7px;">school</mat-icon><a style="margin-left: 25px;"></a>Education</mat-list-item>
          <mat-list-item (click)="snav.close()" routerLink="/Resume"><mat-icon style="margin-left: 7px;">description</mat-icon><a style="margin-left: 25px;" ></a>Resume</mat-list-item>
          <mat-list-item (click)="openSnackBar()" routerLink="/Contact"><mat-icon style="margin-left: 7px;">contact_mail</mat-icon><a style="margin-left: 25px;" ></a>Contact</mat-list-item>

Answer 1

As Karl the Botmap.io developer answers the question the crawler only supports href links.

Hi! Do your links/anchor tags have an href attribute? The bot currently only detects and crawls the href attribute. You can add it even if your angular app doesn't use it internally. It may be redundant, however it may work as a stopgap until I can update the bot to handle this scenario.

Since Im using routerlinks and I don't want to change my code using hrefs I decided to manually create Sitemap.

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url><loc>http://margvel.com</loc><priority>0.5</priority></url>
<url><loc>http://margvel.com/projects</loc><priority>0.5</priority></url>
<url><loc>http://margvel.com/jobs</loc><priority>0.5</priority></url>
<url><loc>http://margvel.com/education</loc><priority>0.5</priority></url>
<url><loc>http://margvel.com/resume</loc><priority>0.5</priority></url>
<url><loc>http://margvel.com/contact</loc><priority>0.5</priority></url>
</urlset>

All I did was went through the routes in angular and put them in xml file like displayed above.

I gave all the links priority 0.5 since it is the manual priority chosen between 0 - 1.0 . I didn't have any preference for pages.

NOTE - This approach is only for small sitemaps with small amount of pages.