How to create sitemap dynamically in Angular 12?

Question

I need to create a sitemap page as my Marketing Team requires this page for SEO purposes. They have an old website built with WordPress and it shows the following:

How can I achieve this functionality in Angular 12?

Answer 1

You need to create the robots.txt and sitemap.xml files under the src folder.

robots.txt

User-agent: *
Disallow:
Sitemap: https://yourdomain.com/sitemap.xml

sitemap.xml

<?xml version="1.0" encoding="UTF-8"?>
<urlset
      xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
            http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
<!-- created with Free Online Sitemap Generator www.xml-sitemaps.com -->


<url>
  <loc>https://yourdomain.com/</loc>
  <lastmod>2022-10-T10:13:39+00:00</lastmod>
  <priority>1.00</priority>
</url>
<url>
  <loc>https://yourdomain.com/about</loc>
  <lastmod>2022-10-T10:13:39+00:00</lastmod>
  <priority>0.80</priority>
</url>
<url>
  <loc>https://yourdomain.com/contact</loc>
  <lastmod>2022-10-T10:13:39+00:00</lastmod>
  <priority>0.80</priority>
</url>
<url>
  <loc>https://yourdomain.com/signin</loc>
  <lastmod>2022-10-T10:13:39+00:00</lastmod>
  <priority>0.80</priority>
</url>
<url>
  <loc>https://yourdomain.com/contact/map</loc>
  <lastmod>2022-10-T10:13:39+00:00</lastmod>
  <priority>0.64</priority>
</url>


</urlset>

update the assets in angular.json file.

angular.json

"options": {
  "outputPath": "dist/browser",
  "index": "src/index.html",
  "main": "src/main.ts",
  "polyfills": "src/polyfills.ts",
  "tsConfig": "tsconfig.app.json",
  "assets": [
    "src/favicon.ico",
    "src/assets",
    "src/manifest.webmanifest",
    "src/sitemap.xml",
    "src/robots.txt"
  ],

if you want to add meta tag on page use the Meta service provided by angular to use and add meta tags