在 app.module.ts 中引入 BrowserModule 和 BrowserTransferStateModule。

import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';

@NgModule({
  imports: [
    BrowserModule.withServerTransition({appId: 'my-app'}),
    AppModule,
    BrowserTransferStateModule
  ],
  bootstrap: [AppComponent],
})
export class AppBrowserModule { }

在 app.server.module.ts 中引入 ServerModule 和 ServerTransferStateModule 。

import { ServerModule, ServerTransferStateModule } from '@angular/platform-server';

@NgModule({
  imports: [
    ServerModule,
    AppModule,
    ServerTransferStateModule
  ],
  bootstrap: [AppComponent],
})
export class AppServerModule { }

在 index.html 中包含以下代码，以在客户端和服务器端同时加载 Angular Material 主题样式和字体：

在 app.component.ts 中使用 TransferState 服务，以在服务器端和客户端之间共享数据。以下示例代码演示如何在组件中获取数据：

import { Component, OnInit } from '@angular/core';
import { TransferState, makeStateKey } from '@angular/platform-browser';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

const DATA_KEY = makeStateKey('my-data');

@Component({
  selector: 'app-root',
  template: `
    

      
{{item}}
    
  `,
})
export class AppComponent implements OnInit {
  public data$: Observable;

  constructor(
    private transferState: TransferState,
    private http: HttpClient,
  ) { }

  ngOnInit() {
    this.data$ = this.http.get('/api/data');
    this.transferState.set(DATA_KEY, this.data$);
  }
}