Angular Universal 是一个用于服务器端渲染 Angular 应用程序的框架。Angular Universal 会在服务器端预先渲染应用程序，然后将预渲染后的 HTML 和 CSS 发送给客户端，从而提高应用程序的性能和 SEO。下面是一个示例，展示了 Angular 应用程序如何通过 Angular Universal 进行服务器端渲染：

1. 首先安装以下依赖项：

npm install --save @angular/platform-server @nguniversal/module-map-ngfactory-loader

2. 创建一个名为“server.ts”的文件，该文件将被用于服务器渲染：

import { enableProdMode } from '@angular/core'; import { renderModuleFactory } from '@angular/platform-server'; import { ngExpressEngine } from '@nguniversal/express-engine'; import { AppServerModuleNgFactory } from './path/to/app.server.module.ngfactory';

const express = require('express'); const app = express();

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

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

enableProdMode();

app.get('*', (req, res) => { res.render('index', { req: req, res: res }); });

app.listen(process.env.PORT || 3000);

3. 然后，在“app.module.ts”中添加以下代码来使应用程序可用于服务器渲染：

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { ServerModule } from '@angular/platform-server'; import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';

import { AppComponent } from './app.component'; import { AppRoutingModule } from './app.routing.module'; import { HeaderComponent } from './header/header.component'; import { FooterComponent } from './footer/footer.component';

@NgModule({ imports: [ BrowserModule.withServerTransition({ appId: 'my-app' }), ServerModule, AppRoutingModule, ModuleMapLoaderModule ], declarations: [ AppComponent, HeaderComponent, FooterComponent ], bootstrap: [AppComponent