这次给大家带来怎样使用Angular对服务端进行渲染，使用Angular对服务端进行渲染的注意事项有哪些，下面就是实战案例，一起来看一下。

Angular Universal

Angular在服务端渲染方面提供一套前后端同构解决方案，它就是Angular Universal（统一平台），一项在服务端运行 Angular 应用的技术。

标准的 Angular 应用会执行在浏览器中，它会在 DOM 中渲染页面，以响应用户的操作。

而 Angular Universal 会在服务端通过一个被称为服务端渲染（server-side rendering - SSR）的过程生成静态的应用页面。

它可以生成这些页面，并在浏览器请求时直接用它们给出响应。 它也可以把页面预先生成为 HTML 文件，然后把它们作为静态文件供服务器使用。

工作原理

要制作一个 Universal 应用，就要安装 platform-server 包。 platform-server 包提供了服务端的 DOM 实现、XMLHttpRequest 和其它底层特性，但不再依赖浏览器。

你要使用 platform-server 模块而不是 platform-browser 模块来编译这个客户端应用，并且在一个 Web 服务器上运行这个 Universal 应用。

服务器（下面的示例中使用的是 Node Express 服务器）会把客户端对应用页面的请求传给 renderModuleFactory 函数。

renderModuleFactory 函数接受一个模板 HTML 页面（通常是 index.html）、一个包含组件的 Angular 模块和一个用于决定该显示哪些组件的路由作为输入。

该路由从客户端的请求中传给服务器。 每次请求都会给出所请求路由的一个适当的视图。

renderModuleFactory 在模板中的 <app> 标记中渲染出哪个视图，并为客户端创建一个完成的 HTML 页面。

最后，服务器就会把渲染好的页面返回给客户端。

为什么要服务端渲染

三个主要原因：

帮助网络爬虫（SEO）

提升在手机和低功耗设备上的性能

迅速显示出第一个页面

帮助网络爬虫（SEO）

Google、Bing、百度、Facebook、Twitter 和其它搜索引擎或社交媒体网站都依赖网络爬虫去索引你的应用内容，并且让它的内容可以通过网络搜索到。

这些网络爬虫可能不会像人类那样导航到你的具有高度交互性的 Angular 应用，并为其建立索引。

Angular Universal 可以为你生成应用的静态版本，它易搜索、可链接，浏览时也不必借助 JavaScript。它也让站点可以被预览，因为每个 URL 返回的都是一个完全渲染好的页面。

启用网络爬虫通常被称为搜索引擎优化 (SEO)。

提升手机和低功耗设备上的性能

有些设备不支持 JavaScript 或 JavaScript 执行得很差，导致用户体验不可接受。 对于这些情况，你可能会需要该应用的服务端渲染、无 JavaScript 的版本。 虽然有一些限制，不过这个版本可能是那些完全没办法使用该应用的人的唯一选择。

快速显示首页

快速显示首页对于吸引用户是至关重要的。

如果页面加载超过了三秒中，那么 53% 的移动网站会被放弃。 你的应用需要启动的更快一点，以便在用户决定做别的事情之前吸引他们的注意力。

使用 Angular Universal，你可以为应用生成“着陆页”，它们看起来就和完整的应用一样。 这些着陆页是纯 HTML，并且即使 JavaScript 被禁用了也能显示。 这些页面不会处理浏览器事件，不过它们可以用 routerLink 在这个网站中导航。

在实践中，你可能要使用一个着陆页的静态版本来保持用户的注意力。 同时，你也会在幕后加载完整的 Angular 应用。 用户会认为着陆页几乎是立即出现的，而当完整的应用加载完之后，又可以获得完全的交互体验。

示例解析

下面将基于我在GitHub上的示例项目 angular-universal-starter 来进行讲解。

这个项目与第一篇的示例项目一样，都是基于 Angular CLI进行开发构建的，因此它们的区别只在于服务端渲染所需的那些配置上。

安装工具

在开始之前，下列包是必须安装的（示例项目均已配置好，只需 npm install 即可）：

@angular/platform-server - Universal 的服务端元件。

@nguniversal/module-map-ngfactory-loader - 用于处理服务端渲染环境下的惰性加载。

@nguniversal/express-engine - Universal 应用的 Express 引擎。

ts-loader - 用于对服务端应用进行转译。

express - Node Express 服务器

使用下列命令安装它们：

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

项目配置

配置工作有：

创建服务端应用模块：src/app/app.server.module.ts

修改客户端应用模块：src/app/app.module.ts

创建服务端应用的引导程序文件：src/main.server.ts

修改客户端应用的引导程序文件：src/main.ts

创建 TypeScript 的服务端配置：src/tsconfig.server.json

修改 @angular/cli 的配置文件：.angular-cli.json

创建 Node Express 的服务程序：server.ts

创建服务端预渲染的程序：prerender.ts

创建 Webpack 的服务端配置：webpack.server.config.js

1、创建服务端应用模块：src/app/app.server.module.ts

import { NgModule } from '@angular/core'; import { ServerModule, ServerTransferStateModule } from '@angular/platform-server'; import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader'; import { AppBrowserModule } from './app.module'; import { AppComponent } from './app.component'; // 可以注册那些在 Universal 环境下运行应用时特有的服务提供商 @NgModule({ imports: [ AppBrowserModule, // 客户端应用的 AppModule ServerModule, // 服务端的 Angular 模块 ModuleMapLoaderModule, // 用于实现服务端的路由的惰性加载 ServerTransferStateModule, // 在服务端导入，用于实现将状态从服务器传输到客户端 ], bootstrap: [AppComponent], }) export class AppServerModule { }

服务端应用模块（习惯上叫作 AppServerModule）是一个 Angular 模块，它包装了应用的根模块 AppModule，以便 Universal 可以在你的应用和服务器之间进行协调。 AppServerModule 还会告诉 Angular 再把你的应用以 Universal 方式运行时，该如何引导它。