无Angular Universal时，构建Angular应用生成URL模板静态文件方案

方案一：抽离URL逻辑到独立模块，构建前用Node.js生成模板 #

这种方案效率最高，无需依赖浏览器环境，核心是把URL生成/解析逻辑从Angular应用中剥离成纯TS/JS模块，在构建阶段直接用Node.js执行并输出文件。

步骤： #

1. 抽离URL模板生成逻辑
   把原本依赖Angular Router或业务服务的URL生成逻辑，改写成不依赖Angular平台的纯函数。比如直接解析路由配置文件中的routes数组，提取所有带参数的URL模板：

   // src/app/shared/url-template-utils.ts
   import { Routes } from '@angular/router';
   
   export function extractAllUrlTemplates(routes: Routes, parentPath = ''): Array<{ template: string, params: string[] }> {
     const templates = [];
     for (const route of routes) {
       const fullPath = parentPath ? `${parentPath}/${route.path}` : route.path;
       if (fullPath) {
         // 提取URL中的参数（如:id、:slug）
         const paramMatches = fullPath.match(/:([^/]+)/g) || [];
         const params = paramMatches.map(p => p.slice(1));
         templates.push({ template: fullPath, params });
       }
       // 递归处理子路由
       if (route.children) {
         templates.push(...extractAllUrlTemplates(route.children, fullPath));
       }
     }
     return templates;
   }
   

2. 编写Node.js生成脚本
   创建一个独立的Node.js脚本，导入上面的工具函数和应用的路由配置，执行后将结果写入JSON/XML文件：

   // generate-url-templates.js
   const fs = require('fs');
   const { extractAllUrlTemplates } = require('./dist/app/shared/url-template-utils');
   // 注意：如果用TS编写脚本，需要先编译或用ts-node运行
   const { routes } = require('./src/app/app-routing.module');
   
   const urlTemplates = extractAllUrlTemplates(routes);
   // 写入JSON文件
   fs.writeFileSync('./dist/url-templates.json', JSON.stringify(urlTemplates, null, 2));
   // 若要生成XML，可自行用XML转换库处理
   

3. 绑定到构建流程
   在package.json中添加预构建脚本，确保构建前自动执行生成逻辑：

   {
     "scripts": {
       "prebuild": "ts-node generate-url-templates.ts", // 若用TS脚本需安装ts-node
       "build": "ng build"
     }
   }
   

方案二：用无头浏览器(Puppeteer)渲染应用，提取URL模板 #

如果URL生成逻辑高度依赖Angular运行时（比如需要调用业务服务生成动态路由），无法轻易抽离，可以用无头浏览器加载构建后的应用，触发URL生成逻辑并提取结果。

步骤： #

1. 暴露URL生成函数到全局
   在Angular应用的初始化逻辑中，把URL生成函数挂载到window对象，方便无头浏览器调用：

   // src/app/app.component.ts
   import { Component, OnInit } from '@angular/core';
   import { UrlService } from './services/url.service';
   
   @Component({ selector: 'app-root', template: '<router-outlet></router-outlet>' })
   export class AppComponent implements OnInit {
     constructor(private urlService: UrlService) {}
   
     ngOnInit(): void {
       // 暴露到全局，供无头浏览器调用
       (window as any).getUrlTemplates = () => this.urlService.generateAllTemplates();
     }
   }
   

2. 编写Puppeteer脚本
   安装puppeteer后，编写脚本加载本地构建后的应用，调用全局函数并写入文件：

   // puppeteer-generate-urls.js
   const puppeteer = require('puppeteer');
   const fs = require('fs');
   const path = require('path');
   
   (async () => {
     const browser = await puppeteer.launch({ headless: 'new' });
     const page = await browser.newPage();
     // 加载本地构建后的index.html
     const indexPath = `file://${path.resolve(__dirname, './dist/your-app-name/index.html')}`;
     await page.goto(indexPath, { waitUntil: 'networkidle2' });
   
     // 调用全局函数获取URL模板
     const urlTemplates = await page.evaluate(() => (window as any).getUrlTemplates());
     // 写入文件
     fs.writeFileSync('./dist/url-templates.json', JSON.stringify(urlTemplates, null, 2));
   
     await browser.close();
   })();
   

3. 绑定到构建流程
   在package.json中添加构建后脚本：

   {
     "scripts": {
       "build": "ng build",
       "postbuild": "node puppeteer-generate-urls.js"
     }
   }
   

方案对比 #

• 方案一：速度快、资源占用低，适合URL逻辑可抽离的场景，是优先推荐的方案。
• 方案二：兼容性强，能处理复杂的运行时依赖场景，但需要额外的浏览器资源，构建速度会变慢。

内容的提问来源于stack exchange，提问作者Mike