Angular SSR预渲染配置问题：社交分享预览无法正常生成

1. 检查Angular预渲染基础配置 #

确保angular.json里的prerender配置正确指向输出目录，并包含所有需要预渲染的路由（含动态路由的具体路径或路由列表文件）：

"prerender": {
  "builder": "@angular-devkit/build-angular:prerender",
  "options": {
    "outputPath": "dist/browser",
    "routes": [
      "/",
      "/blog/post-1",
      "/blog/post-2"
      // 动态路由可改用："routesFile": "routes.txt"，文件内每行写一个路由
    ],
    "discoverRoutes": true // 自动发现应用内路由（可选，适合动态路由较多场景）
  }
}

2. 修正Server.ts的静态文件优先级 #

确保服务器优先返回预渲染好的静态HTML，再回退到SSR逻辑，避免返回JSON状态：

import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';
import { AppServerModule } from './src/main.server';

const app = express();
const distFolder = join(process.cwd(), 'dist/browser');

app.engine('html', ngExpressEngine({
  bootstrap: AppServerModule,
}));

app.set('view engine', 'html');
app.set('views', distFolder);

// 优先返回预渲染静态文件
app.get('*.*', express.static(distFolder, { maxAge: '1y' }));

// 未匹配到静态文件时，走SSR渲染
app.get('*', (req, res) => {
  res.render('index', { req });
});

3. 确保ngx-markdown支持SSR/预渲染 #

在AppServerModule中正确配置ngx-markdown的服务端渲染支持，避免markdown内容仅在客户端解析：

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';
import { MarkdownModule } from 'ngx-markdown';
import { HttpClient } from '@angular/common/http';

@NgModule({
  imports: [
    AppModule,
    ServerModule,
    MarkdownModule.forRoot({
      loader: HttpClient // 确保服务端可加载markdown资源
    })
  ],
  bootstrap: [AppComponent],
})
export class AppServerModule {}

4. 处理动态数据与Meta标签的预渲染 #

使用TransferState确保服务端获取的博客数据和Meta标签能被预渲染到HTML中，避免异步数据未加载导致输出异常：

import { Component, OnInit, Inject } from '@angular/core';
import { Meta } from '@angular/platform-browser';
import { TransferState, makeStateKey } from '@angular/platform-browser';
import { HttpClient } from '@angular/common/http';
import { PLATFORM_ID } from '@angular/core';
import { isPlatformServer } from '@angular/common';

const POST_DATA_KEY = makeStateKey('postData');

@Component({
  selector: 'app-blog-post',
  templateUrl: './blog-post.component.html'
})
export class BlogPostComponent implements OnInit {
  post: any;

  constructor(
    private meta: Meta,
    private transferState: TransferState,
    private http: HttpClient,
    @Inject(PLATFORM_ID) private platformId: Object
  ) {}

  ngOnInit(): void {
    const slug = 'your-post-slug'; // 从路由参数获取实际slug
    if (isPlatformServer(this.platformId)) {
      // 服务端获取数据并设置Meta标签
      this.http.get(`/api/posts/${slug}`).subscribe(data => {
        this.post = data;
        this.transferState.set(POST_DATA_KEY, data);
        // 配置Open Graph标签
        this.meta.updateTag({ property: 'og:title', content: this.post.title });
        this.meta.updateTag({ property: 'og:description', content: this.post.excerpt });
        this.meta.updateTag({ property: 'og:image', content: this.post.coverImage });
      });
    } else {
      // 客户端从TransferState读取预渲染好的数据
      this.post = this.transferState.get(POST_DATA_KEY, null);
      if (!this.post) {
        // 客户端降级逻辑
        this.http.get(`/api/posts/${slug}`).subscribe(data => {
          this.post = data;
          this.setMetaTags(data);
        });
      } else {
        this.setMetaTags(this.post);
      }
    }
  }

  private setMetaTags(post: any): void {
    this.meta.updateTag({ property: 'og:title', content: post.title });
    this.meta.updateTag({ property: 'og:description', content: post.excerpt });
  }
}

5. 配置Azure Static Web Apps路由规则 #

在staticwebapp.config.json中添加路由规则，确保预渲染的HTML文件被优先返回：

{
  "routes": [
    {
      "route": "/blog/*",
      "serve": "/blog/{slug}.html",
      "statusCode": 200
    },
    {
      "route": "/*",
      "serve": "/index.html",
      "statusCode": 200
    }
  ],
  "navigationFallback": {
    "rewrite": "/index.html",
    "exclude": ["/assets/*", "/*.css", "/*.js"]
  }
}

6. 验证预渲染结果与部署流程 #

• 本地执行npm run prerender后，检查dist/browser目录下对应路由的HTML文件（如/blog/post-1/index.html），确认文件包含完整HTML结构、Open Graph标签和解析后的markdown内容。
• 部署时确保先执行预渲染再部署：

"scripts": {
  "build:ssr": "ng build && ng run your-app:server",
  "prerender": "ng run your-app:prerender",
  "deploy": "npm run prerender && swa deploy dist/browser"
}

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