Angular Universal SSR动态内容未在页面源码显示，如何解决？

问题根源在于：服务端渲染时，组件ngOnInit里的异步HTTP请求是异步执行的，Angular Universal不会等待请求完成就生成HTML并返回给客户端，导致动态内容还未赋值，页面源码中仅显示静态的"Hello"。以下是两种可行的解决方法：

方案一：使用路由Resolve守卫预加载数据 #

通过路由Resolve可以在组件渲染前完成数据请求，确保服务端渲染时已拿到动态内容。

1. 创建Resolve服务

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class ContentResolver implements Resolve<string> {
  constructor(private http: HttpClient) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<string> {
    return this.http.get<string>('https://localhost:8080/getContent');
  }
}

2. 配置路由
   在路由配置中添加resolve属性，指定预加载的数据：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PageComponent } from './page/page.component';
import { ContentResolver } from './content.resolver';

const routes: Routes = [
  {
    path: '',
    component: PageComponent,
    resolve: {
      dynamicContent: ContentResolver
    }
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

3. 修改组件获取预加载数据
   组件通过ActivatedRoute获取路由预加载的内容：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-page',
  templateUrl: './page.component.html',
  styleUrls: ['./page.component.scss']
})
export class PageComponent implements OnInit {
  dynamicContent: string = "";

  constructor(private route: ActivatedRoute) { }

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

方案二：使用TransferState共享服务端数据 #

通过TransferState可在服务端请求数据后，将数据传递到客户端避免重复请求，同时确保服务端渲染时等待请求完成。

修改组件代码：

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

// 定义存储数据的唯一标识key
const CONTENT_KEY = makeStateKey<string>('dynamicContent');

@Component({
  selector: 'app-page',
  templateUrl: './page.component.html',
  styleUrls: ['./page.component.scss']
})
export class PageComponent implements OnInit {
  dynamicContent: string = "";

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

  ngOnInit(): void {
    let content$: Observable<string>;

    if (this.transferState.hasKey(CONTENT_KEY)) {
      // 客户端直接读取服务端已存入TransferState的数据
      this.dynamicContent = this.transferState.get(CONTENT_KEY, "");
      content$ = of(this.dynamicContent);
      this.transferState.remove(CONTENT_KEY);
    } else if (isPlatformServer(this.platformId)) {
      // 服务端请求数据并存入TransferState
      content$ = this.http.get<string>('https://localhost:8080/getContent').pipe(
        tap(content => {
          this.transferState.set(CONTENT_KEY, content);
          this.dynamicContent = content;
        })
      );
    } else {
      // 客户端无缓存数据时直接请求
      content$ = this.http.get<string>('https://localhost:8080/getContent').pipe(
        tap(content => this.dynamicContent = content)
      );
    }

    content$.subscribe();
  }
}

注意事项 #

• 确保服务端环境能正常访问你的API地址（比如本地https://localhost:8080/getContent，服务端可能需要调整baseUrl避免请求失败）
• 不要在组件构造函数中执行异步数据请求，ngOnInit是合适的生命周期钩子

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