Angular - 从 @Angular/router 生成 sitemap.xml

Question

我有一个有角度的应用程序，带有一个小型路由文件，如下所示

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'home',
    loadChildren: () => import('./pages/common/home/home.module').then( m => m.HomePageModule)
  },
  {
    path: 'contact',
    loadChildren: () => import('./pages/contact/contact.module').then( m => m.ContactPageModule)
  },
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

在构建应用程序时，是否有办法生成包含 url contact 和 home 的文件 sitemap.xml ？

Answer 1

您可以导入您的routes内容，确保使用 、 和sitemap.ts向每个路由添加loc数据lastmod对象。changefreqpriority

export const routes: Routes = [
  {
    path: "",
    component: LandingComponent,
    data: {
      loc: "/",
      lastmod: "2022-04-07",
      changefreq: "daily",
      priority: "1.0",

进而

import * as fs from "fs";
import * as path from "path";

const HOSTNAME = "your-url-goes-here"
const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">`
  .concat(
    routes
      .map((route) =>
        createUrl(
          `${HOSTNAME}${route.data.loc}`,
          route.data.lastmod,
          route.data.changefreq,
          route.data.priority
        )
      )
      .join("\n")
  )
  )
  .concat("\n</urlset>");

fs.writeFileSync(path.join(__dirname, "./src/sitemap.xml"), sitemap);

然后你可以添加sitemap.ts到你的package.json

...
"build-sitemap": "ts-node -O '{\"module\": \"commonjs\"}' ./sitemap.ts"
}