Angular 8网站无法生成站点地图（含在线工具生成无效）求助

一、静态站点地图手动/半手动生成 #

如果你的站点路由以固定静态路由为主，直接手动编写XML格式的站点地图即可：

• 编写sitemap.xml文件，放在项目src/assets目录下，示例结构：

  <?xml version="1.0" encoding="UTF-8"?>
  <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
    <url>
      <loc>https://your-domain.com/</loc>
      <lastmod>2024-05-20</lastmod>
      <changefreq>weekly</changefreq>
      <priority>1.0</priority>
    </url>
    <url>
      <loc>https://your-domain.com/about</loc>
      <lastmod>2024-05-20</lastmod>
      <changefreq>monthly</changefreq>
      <priority>0.8</priority>
    </url>
  </urlset>
  

• 在angular.json的projects -> [你的项目名] -> architect -> build -> options -> assets中添加配置，确保打包时将文件输出到根目录：

  {"glob": "sitemap.xml", "input": "src/assets", "output": "/"}
  

二、用工具动态生成站点地图 #

结合服务端渲染(SSR)和ngx-sitemap库自动生成：

1. 安装依赖：

   npm install @nguniversal/express-engine ngx-sitemap --save
   

2. 在SSR入口文件server.ts中添加生成逻辑：

   import { SitemapStream, streamToPromise } from 'sitemap';
   import { createWriteStream } from 'fs';
   import { join } from 'path';
   
   // 可从Angular路由配置中动态读取静态路由
   const staticRoutes = ['/', '/about', '/contact'];
   
   // 初始化站点地图流
   const sitemapStream = new SitemapStream({ hostname: 'https://your-domain.com' });
   const outputPath = join(__dirname, 'dist/[你的项目名]/browser', 'sitemap.xml');
   const writeStream = createWriteStream(outputPath);
   
   // 写入路由数据
   staticRoutes.forEach(route => {
     sitemapStream.write({ url: route, changefreq: 'weekly', priority: 0.8 });
   });
   
   // 完成生成
   sitemapStream.end();
   streamToPromise(sitemapStream).then(() => writeStream.end());
   

3. 执行SSR打包命令：npm run build:ssr && npm run serve:ssr，站点地图会自动生成在dist/browser目录下。

三、处理动态路由（如博客、商品页） #

如果存在/blog/:id这类动态路由，需从后端获取实际路径后加入站点地图：

1. 在服务器端调用接口获取动态路由列表：

   import axios from 'axios';
   
   async function getDynamicRoutes() {
     const res = await axios.get('https://your-api.com/api/blog-posts');
     return res.data.map(post => `/blog/${post.slug}`);
   }
   

2. 合并静态与动态路由后生成站点地图：

   const staticRoutes = ['/', '/about'];
   const dynamicRoutes = await getDynamicRoutes();
   const allRoutes = [...staticRoutes, ...dynamicRoutes];
   // 后续生成逻辑同步骤二
   

四、解决在线工具爬取失败问题 #

在线工具爬不到Angular站点，核心原因是单页应用的客户端渲染路由无法被无JS环境的爬虫识别，解决办法：

• 启用SSR：让服务器返回完整渲染的HTML，爬虫可直接识别所有路由。
• 启用预渲染：无需全量SSR，仅预渲染指定路由为静态HTML：
  1. 安装依赖：npm install @nguniversal/builders --save-dev
  2. 在angular.json中配置预渲染：

     "architect": {
       "prerender": {
         "builder": "@nguniversal/builders:prerender",
         "options": {
           "browserTarget": "[你的项目名]:build",
           "serverTarget": "[你的项目名]:server",
           "routes": ["/", "/about", "/contact"]
         }
       }
     }
     

  3. 执行npm run prerender，预渲染后的静态HTML可被在线工具正常爬取。

内容的提问来源于stack exchange，提问作者JERRY.G