Angular 服务端渲染 Angular Universal 实例

        标准的 Angular 应用运行在浏览器中，它会在 DOM 中渲染页面，以响应用户的操作。 而Angular Universal 会在服务端运行，生成一些静态的应用页面，稍后再通过客户端进行启动。 这意味着该应用的渲染通常会更快，让用户可以在应用变得完全可交互之前，先查看应用的布局。

        本文以蜗牛双语阅读网站为例，说明网站整个SSR改造的过程。

1、创建服务端应用模块

        要创建服务端应用模块 app.server.module.ts，请在项目目录下运行 CLI 命令：

ng add @nguniversal/express-engine

        命令执行后，项目中会添加几个服务端渲染相关的文件

        根目录下会新增 server.ts 和 tsconfig.server.json

        src目录下会新增 main.server.ts 和 app/app.server.module.ts

2、调试运行

        先看一下客户端渲染方式的调试运行效果，使用 npm run start 启动页面，查看浏览器开发工具界面的网络标签页，可以看到请求的localhost网页文档，只是引用了相关的样式和js，并没有后台数据：

        查看预览窗口，也只能看到一个空白的页面：