Angular 2/3/4/5生产构建（AoT）能否预渲染指定多路由？

Great question! You absolutely can pre-render multiple specified routes during your Angular 2/3/4/5 production (AoT) build to get static HTML files—just like you described—without the complexity of running a full Angular Universal SSR server. This is perfect for static hosting on S3, and it delivers all the SEO/performance benefits of server-side rendering without the ongoing server maintenance.

1. Set Up Angular Universal Tooling (Build-Time Only) #

Even though you don't want to run an SSR server, you'll need Universal's rendering capabilities to generate the static HTML at build time. Install the required packages (make sure versions match your Angular core version):

npm install @angular/platform-server @angular/universal --save

Next, create a server-side module (app.server.module.ts) that wraps your root app module, plus a server.ts file to bootstrap the Universal app. You can adapt version-appropriate boilerplate from Angular's Universal docs—this is only for the build pipeline, not for running a live server.

2. Write a Prerendering Script #

Create a Node.js script (e.g., prerender.js) that uses the Universal renderer to generate static HTML for each of your target routes. This script will take your AoT-built app, render each route, and save the HTML files in the correct directory structure:

const fs = require('fs');
const path = require('path');
const { renderModuleFactory } = require('@angular/platform-server');
const { AppServerModuleNgFactory } = require('./dist-server/main.bundle');

// List all the routes you want to pre-render
const routes = [
  '/',
  '/routeA',
  '/routeB',
  '/routeC/customRouteParam'
];

// Point to your Angular production build output directory
const outputDir = path.join(__dirname, 'dist');

// Render each route and save as static index.html
routes.forEach(route => {
  renderModuleFactory(AppServerModuleNgFactory, {
    document: fs.readFileSync(path.join(outputDir, 'index.html'), 'utf8'),
    url: route
  }).then(html => {
    // Create nested directories for routes like /routeC/customRouteParam
    const routePath = path.join(outputDir, route);
    if (!fs.existsSync(routePath)) {
      fs.mkdirSync(routePath, { recursive: true });
    }
    // Write the pre-rendered HTML file
    fs.writeFileSync(path.join(routePath, 'index.html'), html);
    console.log(`Successfully prerendered: ${route}`);
  }).catch(err => {
    console.error(`Failed to prerender ${route}:`, err);
  });
});

3. Update Your Build Pipeline #

Modify your package.json scripts to run the AoT build, then the Universal server build, then the prerendering script:

"scripts": {
  "build:prod": "ng build --prod --aot",
  "build:server": "ng build --prod --aot --app 1 --output-hashing=none",
  "prerender": "node prerender.js",
  "build:prerender": "npm run build:prod && npm run build:server && npm run prerender"
}

(Note: The --app 1 flag refers to the server-side app configuration in your .angular-cli.json—make sure you've added the server module there as a second app entry.)

4. Deploy to S3 #

• Run npm run build:prerender—this will generate your dist folder with:
  • The root index.html
  • Subdirectories like routeA/, routeB/, and routeC/customRouteParam/, each containing their own pre-rendered index.html
• Upload the entire dist folder to S3. Configure S3's static hosting settings to serve index.html as the default document for subdirectories (this is a standard option in S3's hosting configuration).

Why This Works for Your Use Case #

• No SSR Server Complexity: All rendering happens at build time—you only host static files on S3.
• AoT Compilation: Your app is still compiled with AoT, so it's fast and lean.
• OG Tag Support: Pre-rendered HTML includes all your Open Graph meta tags, so social sharing works correctly.
• Faster Load Times: Users get fully rendered HTML immediately, eliminating the initial blank screen while Angular boots up.

Angular 2/3/4/5 Specific Notes #

• Ensure your Universal package versions match your Angular core version (e.g., use @angular/universal@5.x for Angular 5).
• For Angular 2/3, some Universal APIs may differ slightly—check version-specific docs for minor tweaks to the prerender.js script.

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