问题描述： 当使用Angular Universal进行服务器端渲染时，查看页面源代码时发现HTML未被渲染。

解决方法：

1. 确保已正确配置Angular Universal：

   • 在Angular项目中安装@angular/platform-server和@nguniversal/module-map-ngfactory-loader包。
   • 在app.server.module.ts文件中导入ServerModule，并将其添加到imports数组中。
   • 在main.ts文件中将platformBrowserDynamic().bootstrapModule(AppModule)替换为platformServer().bootstrapModule(AppServerModule)。
   • 在tsconfig.server.json文件中添加"angularCompilerOptions": {"entryModule": "app/app.server.module#AppServerModule"}。
   • 配置webpack.server.config.js文件以生成服务器端渲染的bundle。

2. 确保在服务端正确渲染HTML：

   • 在你的Angular组件中使用Angular Universal提供的ServerTransferStateModule模块，以确保在服务器端和客户端之间共享状态。
   • 在组件的构造函数中注入TransferState，并在ngOnInit()方法中使用transferState.inject()方法来获取服务器端渲染的数据。
   • 使用TransferState.set()方法将数据存储在服务器端传输状态中，以便在客户端渲染时使用。

示例代码：

app.server.module.ts：

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';

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

main.ts：

import { enableProdMode } from '@angular/core';
import { platformServer } from '@angular/platform-server';
import { AppServerModule } from './app/app.server.module';

enableProdMode();

const PORT = process.env.PORT || 4000;

platformServer().bootstrapModule(AppServerModule).then(appModule => {
  const express = require('express');
  const app = express();

  app.get('*', (req, res) => {
    res.render('index', {
      req,
      res,
      providers: [
        { provide: 'request', useValue: req },
        { provide: 'response', useValue: res }
      ]
    });
  });

  app.listen(PORT, () => {
    console.log(`Node server listening on http://localhost:${PORT}`);
  });
});

app.component.ts：

import { Component, OnInit } from '@angular/core';
import { TransferState } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  template: `
    
{{ title }}
    
{{ content }}
  `
})
export class AppComponent implements OnInit {
  title: string;
  content: string;

  constructor(private transferState: TransferState) { }

  ngOnInit() {
    this.title = this.transferState.get('title', '');
    this.content = this.transferState.get('content', '');
  }
}

app.server.component.ts：

import { Component, OnInit } from '@angular/core';
import { TransferState, makeStateKey } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  template: `
    
{{ title }}
    
{{ content }}
  `
})
export class AppComponent implements OnInit {
  title: string;
  content: string;

  constructor(private transferState: TransferState) { }

  ngOnInit() {
    this.title = 'Hello, World!';
    this.content = 'This is server-rendered content.';

    this.transferState.set('title', this.title);
    this.transferState.set('content', this.content);
  }
}

以上代码示例展示了如何使用Angular Universal进行服务器端渲染，并在服务端和客户端之间共享状态。确保在app.component.ts和app.server.component.ts中使用TransferState来获取和设置服务器端渲染的数据。