Angular6通过CLI添加Universal支持后的配置疑问及后续操作咨询

1. 为什么angular.json会自动添加server配置？ #

这个server配置是Angular CLI为服务端渲染(SSR) 准备的核心构建规则，专门用来告诉CLI如何编译生成能在Node.js环境运行的服务端应用bundle：

• builder: 指定使用官方的@angular-devkit/build-angular:server构建器，它和客户端构建器的区别在于会剔除浏览器特有的API依赖，适配Node.js的运行环境。
• outputPath: 服务端编译产物的独立输出目录，和客户端的dist/VulogDeploy分开存放，避免文件冲突。
• main: 服务端应用的入口文件main.server.ts，这个文件是ng generate universal自动生成的，负责引导Angular的服务端模块（AppServerModule）启动。
• tsConfig: 服务端专用的TypeScript配置文件，里面会调整编译选项（比如移除dom相关的lib、添加node lib），确保代码能在Node.js环境正常编译。

2. 是否有其他CLI命令可以生成服务端应用？ #

在Angular 6版本中，ng generate universal是官方推荐的唯一CLI命令来初始化Universal服务端应用。它会帮你自动完成所有基础配置工作：

• 创建服务端入口文件main.server.ts和对应的tsconfig.server.json
• 修改angular.json添加server构建配置
• 生成基于Express框架的服务端启动文件server.ts（用于加载服务端bundle并处理SSR请求）

如果不用CLI命令，就只能手动通过Webpack配置实现：自己编写webpack.server.config.js，配置入口、输出、loader，处理Angular的服务端编译逻辑——但这种方式需要你对Webpack和Angular SSR原理有深入了解，远不如CLI命令省心，官方也更推荐用CLI来初始化。

3. 执行ng generate universal后的正确后续操作 #

完成初始化后，你可以按照以下步骤测试和部署SSR应用：

步骤1：编译客户端和服务端bundle #

首先构建生产环境的客户端应用：

ng build --prod

然后构建服务端应用：

ng run VulogDeploy:server

（这里的VulogDeploy是你的项目名称，对应angular.json里的项目节点）

步骤2：启动服务端渲染服务器 #

ng generate universal会自动生成server.ts文件，它是基于Express的服务端入口，用来加载服务端bundle并处理SSR请求。你需要先编译这个文件（如果用TypeScript编写服务器的话），再用Node启动：

# 编译server.ts
tsc server.ts
# 启动服务器
node server.js

启动后，访问http://localhost:4000（默认端口，可在server.ts里修改），就能看到服务端渲染的页面了。

步骤3：适配服务端渲染的代码调整 #

为了确保应用在服务端正常运行，你需要检查代码中是否有浏览器特有的API调用（比如window、document），如果有，需要用Angular的PLATFORM_ID来区分环境：

import { PLATFORM_ID, Inject } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

constructor(@Inject(PLATFORM_ID) private platformId: object) {}

ngOnInit() {
  if (isPlatformBrowser(this.platformId)) {
    // 仅在浏览器环境执行的代码，比如操作window
    console.log(window.innerWidth);
  }
}

步骤4：部署到生产环境 #

部署时，你需要把dist目录下的客户端（dist/VulogDeploy）和服务端（dist/VulogDeploy-server）bundle，以及编译后的server.js一起部署到Node.js服务器上，启动server.js即可提供SSR服务。

内容的提问来源于stack exchange，提问作者Dragouf