Angular Universal从服务加载时服务端Meta标签不更新问题

导航至user/:username路由时，通过服务加载用户数据渲染页面，但使用该数据更新SEO Meta标签时，仅客户端标签会更新，服务端无变化。当前环境为Angular 16.1.7、NgUniversal 16.1.1、Ionic 8。另外，service-detail.component.ts调用同一SEO服务函数可正常更新Meta标签。

相关代码 #

user.page.ts #

ngOnInit(): void {
  this.route.params.subscribe( (params: ProfileParams) => this.getUserProfile(params.username) );
}

private getUserProfile(username: string): void {
this.profiles.getUserProfile(username).subscribe({
  next: profile => {
    this.profile = profile;
    this.updateMetas();
  }, error: error => {
    this.router.navigate(['404']);
    console.error(error);
  }
});

private updateMetas(): void {
const PROFILE_NAME: string = `${this.profile?.name || 'Profile'} ${this.profile?.last_name || ''}`.trim();
this.title.setTitle(`${PROFILE_NAME} | ${environment.appName}`);
this.seo.updateUrlMetas({
  title: PROFILE_NAME,
  description: this.profile?.description,
  image: this.profile?.profile_picture,
  keywords: [PROFILE_NAME, this.profile?.profession, this.profile?.locale]
});
}

seo.service.ts #

private platformId = inject(PLATFORM_ID);
constructor(
    private title: Title,
    private meta: Meta,
    private router: Router
) {}

private sanitizeText(text?: string): string {
    return text ? text.replace(/(\r\n|\n|\r)/gm, ' ') : '';
}

public updateUrlMetas(seoData: SeoData): void {
    //this.title.setTitle(seoData.title);
    this.meta.updateTag({ name: 'title', content: seoData.title }, `name='title'`);
    this.meta.updateTag({ property: 'og:title', content: seoData.title }, `property='og:title'`);
    this.meta.updateTag({ name: 'twitter:title', content: seoData.title }, `name='twitter:title'`);

    if (seoData.description) {
        const cleanDescription = this.sanitizeText(seoData.description);
        this.meta.updateTag({ name: 'description', content: cleanDescription }, `name='description'`);
        this.meta.updateTag({ property: 'og:description', content: cleanDescription }, `property='og:description'`);
        this.meta.updateTag({ name: 'twitter:description', content: cleanDescription }, `name='twitter:description'`);
    }

    if (seoData.image) {
        this.meta.updateTag({ property: 'og:image', content: seoData.image }, `property='og:image'`);
        this.meta.updateTag({ name: 'twitter:image', content: seoData.image }, `name='twitter:image'`);
    }

    if (seoData.keywords?.length) {
        this.meta.updateTag({ name: 'keywords', content: seoData.keywords.join(', ') }, `name='keywords'`);
    }

    const fullUrl = isPlatformServer(this.platformId) 
        ? `https://konfii.com${this.router.url}` 
        : window.location.href;
    this.meta.updateTag({ property: 'og:url', content: fullUrl }, `property='og:url'`);
    this.meta.updateTag({ property: 'al:web:url', content: fullUrl }, `property='al:web:url'`);
    this.meta.updateTag({ property: 'al:android:url', content: `com.konfii.app:${this.router.url}` }, `property='al:android:url'`);

    this.meta.updateTag({ property: 'og:type', content: 'website' }, `property='og:type'`);
    this.meta.updateTag({ name: 'twitter:card', content: seoData.image ? 'summary_large_image' : 'summary' }, `name='twitter:card'`);
}

service-detail.component.ts #

ngOnInit(): void {
if(!this.uuid) { this.router.navigate(['404']); }
this.refreshFunction.subscribe( event => this.handleRefresh(event) );
this.services.getService(this.uuid, this.auth?.user?.unique_code).subscribe({
  next: res => {
    this.serviceDetail = res;
    this.setMetaTags(res);
    this.reviews.getReviewsPerService(this.uuid, 1).subscribe(reviews => this.serviceReviews = reviews);
    this.reviews.getReviewScorePerService(this.uuid).subscribe(score => this.serviceScore = score);
  }, error: error => {
    console.error(error);
    if(error.status === 404) { return this.router.navigate(['404']); }
  }
});
}

问题原因 #

SSR场景下，ngOnInit中的异步请求不会阻塞服务端渲染流程。服务端会直接生成初始HTML并返回，等异步请求完成后再更新Meta标签时，服务端已经完成渲染，因此服务端的Meta标签不会同步更新。而service-detail.component.ts能正常工作，大概率是因为其数据获取时机更早（比如路由参数提前可用），或组件在服务端渲染时等待了数据加载完成。

解决方案 #

方案1：使用路由Resolver预加载数据 #

通过路由解析器在进入路由前就加载用户数据，确保服务端渲染时已拿到数据并更新Meta标签。

1. 创建ProfileResolver

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable, of } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { ProfilesService } from './profiles.service';
import { Router } from '@angular/router';
import { RESPONSE } from '@angular/platform-server';
import { inject } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ProfileResolver implements Resolve<any> {
  constructor(private profilesService: ProfilesService, private router: Router) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
    const username = route.paramMap.get('username');
    const response = inject(RESPONSE, { optional: true });
    
    return this.profilesService.getUserProfile(username!).pipe(
      catchError(error => {
        if (response) {
          response.status(404);
        }
        this.router.navigate(['404']);
        return of(null);
      })
    );
  }
}

2. 配置路由使用Resolver

const routes: Routes = [
  {
    path: 'user/:username',
    component: UserPage,
    resolve: {
      profile: ProfileResolver
    }
  }
];

3. 修改user.page.ts获取预加载数据

ngOnInit(): void {
  this.profile = this.route.snapshot.data['profile'];
  if (this.profile) {
    this.updateMetas();
  }
}

// 移除原getUserProfile方法，数据已由Resolver预加载完成

方案2：用TransferState确保服务端等待异步操作 #

如果不想用Resolver，可通过TransferState在服务端保存数据，同时确保服务端等待数据加载完成：

import { TransferState, makeStateKey } from '@angular/platform-browser';
import { isPlatformServer } from '@angular/common';
import { PLATFORM_ID, inject } from '@angular/core';

private readonly platformId = inject(PLATFORM_ID);
private readonly transferState = inject(TransferState);
private readonly PROFILE_STATE_KEY = makeStateKey<any>('profile');

ngOnInit(): void {
  if (isPlatformServer(this.platformId)) {
    this.route.params.subscribe((params: ProfileParams) => {
      this.profiles.getUserProfile(params.username).subscribe({
        next: profile => {
          this.transferState.set(this.PROFILE_STATE_KEY, profile);
          this.profile = profile;
          this.updateMetas();
        },
        error: error => {
          const response = inject(RESPONSE, { optional: true });
          if (response) response.status(404);
          this.router.navigate(['404']);
          console.error(error);
        }
      });
    });
  } else {
    const savedProfile = this.transferState.get(this.PROFILE_STATE_KEY, null);
    if (savedProfile) {
      this.profile = savedProfile;
      this.updateMetas();
      this.transferState.remove(this.PROFILE_STATE_KEY);
    } else {
      this.route.params.subscribe((params: ProfileParams) => this.getUserProfile(params.username));
    }
  }
}

额外注意事项 #

• 服务端处理404时，需通过RESPONSE设置HTTP状态码，避免返回200状态码导致搜索引擎误判。
• 确保seo.service.ts中router.url在服务端能正确获取当前路由地址，NgUniversal下该值是可靠的。

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