在 Angular 的 server.ts 文件中，代码 server.set('view engine', 'html'); 属于 Node.js 与 Express 框架的语法。在这一行中，server 通常是 Express 实例，通过 set() 方法来配置服务器的一些属性与行为。
1. Express 中的 server.set() 方法
server.set() 是 Express.js 提供的一个方法，用于设定全局的配置信息。在本例中，server 指代的是一个通过 express() 创建的应用实例，例如：
import * as express from 'express';
const server = express();
接着，server.set() 方法可以用来为这个服务器对象设置一些配置项，影响服务器处理请求的方式。
2. 'view engine' 和 'html' 的含义
server.set('view engine', 'html'); 这一行代码有两个部分：'view engine' 和 'html'。
-
'view engine'：这是一种在 Express.js 中常见的配置，用于指定要使用的视图引擎（view engine）。视图引擎的作用是将模板文件渲染为 HTML 文件，并将其发送到客户端。视图引擎能够让开发者用模板语言编写视图文件，来实现动态的 HTML 输出。 -
'html'：这个值表示设定视图引擎为 HTML 格式的模板文件。需要注意的是，虽然默认的Express本身不提供对 HTML 文件作为模板进行渲染的功能，但通过结合一些视图引擎扩展，比如consolidate、ejs或者handlebars等，能够实现这一点。
3. 为什么要使用 'view engine'
Angular 是一个前端框架，而 Angular Universal 是 Angular 提供的一个用于实现服务端渲染（SSR）的解决方案。通常来说，Angular 应用在客户端渲染时，浏览器会从服务器加载应用的 JavaScript 文件，随后由浏览器解析并执行 JavaScript 以生成 DOM 元素。
在 SSR 场景下，服务器端直接将生成好的 HTML 页面返回给客户端，这样能够显著提高页面首次加载的速度，并且对搜索引擎更友好。而 server.set('view engine', 'html'); 的配置则可以使得服务器支持 HTML 文件的渲染。
当服务器接收到对页面的请求时，它会根据 Angular 服务器端渲染引擎生成动态的 HTML 页面，然后利用视图引擎将这个页面返回给客户端。这个过程让前端页面的首次加载看起来非常迅速，因为服务器已经把大部分 HTML 页面结构准备好了，客户端只需对这个内容做少量处理。
4. 举个例子说明 'view engine' 的使用
假设你想要创建一个支持服务器端渲染的 Angular 应用，并且希望在服务器端直接渲染 HTML 视图。你可能会这样使用 Express 与 Angular Universal 的结合来配置服务器。
下面我会为你展示一个典型的例子，来说明 server.set('view engine', 'html'); 具体是如何工作的：
import 'zone.js/dist/zone-node';
import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';
import { AppServerModule } from './src/main.server';
const server = express();
const distFolder = join(process.cwd(), 'dist/my-angular-app/browser');
const indexHtml = 'index';
// 设置视图引擎为 HTML
server.set('view engine', 'html');
server.set('views', distFolder);
// 使用 Angular Universal 的 Express 引擎来渲染视图
server.engine('html', ngExpressEngine({
bootstrap: AppServerModule,
}));
// 处理对应用根目录的 GET 请求
server.get('*.*', express.static(distFolder, {
maxAge: '1y'
}));
server.get('*', (req, res) => {
res.render(indexHtml, { req });
});
// 启动服务器
server.listen(4000, () => {
console.log(`Node server listening on http://localhost:4000`);
});
在上述代码中，我们结合了 Express 和 Angular Universal 进行服务器端渲染：
-
视图引擎配置：
-
server.set('view engine', 'html');表示我们使用 HTML 作为视图引擎。 -
server.set('views', distFolder);告诉Express，我们存放视图文件的位置是在distFolder，这里即为编译后的 Angular 应用目录。
-
-
引擎配置：
-
server.engine('html', ngExpressEngine({ bootstrap: AppServerModule }));这里配置了 Angular Universal 的渲染引擎，使得它能够处理 HTML 文件的渲染。 -
ngExpressEngine是由@nguniversal/express-engine提供的一个渲染引擎，用于将 Angular 应用渲染为 HTML。
-
-
请求处理：
- 对于所有静态资源文件（例如 JavaScript、CSS 等），我们使用
express.static()来提供服务，这样客户端可以加载到这些资源。 - 对于所有其他请求，我们通过
res.render(indexHtml, { req })来渲染 HTML 页面，并将其返回给客户端。res.render()使用之前设置的 HTML 视图引擎来进行页面渲染。
- 对于所有静态资源文件（例如 JavaScript、CSS 等），我们使用
5. 深入理解视图引擎在 Angular Universal 中的作用
使用视图引擎的主要原因是为了实现页面的动态渲染。对于 Angular Universal，视图引擎使得服务器端能够提前生成页面的完整 HTML，这个过程带来了几个显著的好处：
-
提高首屏加载速度：在传统的客户端渲染模式中，浏览器需要下载 JavaScript 代码，解析并执行它们，才能够生成页面内容。而通过服务器端渲染，服务器可以将完整的 HTML 直接发送给客户端，大幅减少页面的加载时间。
-
SEO 友好：对于需要优化搜索引擎优化（SEO）的应用，服务器端渲染尤其重要。搜索引擎的爬虫并不能很好地处理 JavaScript，这意味着如果页面是通过客户端渲染生成的，爬虫可能无法获取到完整的页面内容。而服务器端渲染使得爬虫能够直接获取到完整的 HTML，改善页面的 SEO。
-
支持较慢网络环境：在某些网络条件较差的环境中，服务器端渲染也能够提高应用的用户体验。因为初始的 HTML 已经由服务器生成，客户端可以立即显示内容，减少用户在加载 JavaScript 期间的等待时间。
6. 视图引擎与不同的模板语言
server.set('view engine', 'html'); 的设置使得服务器能够渲染 HTML 格式的文件，但通常在服务器端渲染中，直接渲染 HTML 文件并不是最佳实践。为了提高可维护性与代码复用性，开发者经常选择使用各种模板引擎，如 EJS、Pug 或 Handlebars 等。通过这些模板引擎，开发者可以用模板语言撰写页面，模板引擎则会将模板渲染为 HTML 输出。
在使用 Angular Universal 时，ngExpressEngine 结合了 Angular 框架本身的能力，使得它能够直接渲染 Angular 应用为 HTML 页面，而不需要额外的模板引擎。server.set('view engine', 'html'); 这句代码就为 ngExpressEngine 提供了这样的一个 HTML 渲染环境。
7. 补充说明：Node.js 和 Express 的关系
在这个上下文中，我们提到了 Node.js 与 Express，它们之间的关系有必要详细说明一下：
-
Node.js：一个基于 Chrome V8 引擎的 JavaScript 运行时，用于构建高性能的网络服务器。
-
Express：一个基于 Node.js 的 Web 框架，它简化了服务器端应用的创建与管理，提供了大量的中间件与实用方法。
server是通过调用express()方法来创建的应用实例，用于处理客户端的请求。
server.set() 方法正是 Express 提供的一种配置手段，用于设定应用的各类全局属性，例如端口、视图引擎、静态资源路径等。
8. 小结：HTML 作为视图引擎的限制与改进
server.set('view engine', 'html'); 的设置很直接，但并不是每个场景下都适合使用。对于复杂的应用，通常建议引入高级的模板引擎，以便在模板中使用变量、逻辑控制等功能。Angular Universal 本身提供的 ngExpressEngine 已经能够很好地应对这些复杂的需求，因此我们通常不会自己手动去编写 HTML 模板文件，而是直接利用 Angular 的模板系统与 SSR 能力。
在现代的前端开发中，SSR（服务器端渲染）是一种应对性能与 SEO 问题的强大工具，而视图引擎是这一体系中的重要一环。通过配置 server.set('view engine', 'html');，我们可以让服务器知道如何处理客户端请求，并且以最优的方式返回 HTML 页面。
9. 关于性能的考虑
设置视图引擎的另一层考量是性能问题。对于现代应用程序，渲染性能是一个关键指标。通过服务器端渲染预先生成页面的 HTML，可以显著减少浏览器处理 JavaScript 的时间。在一些性能要求较高的应用场景下，SSR 能够减少 Time To First Byte (TTFB)，从而使页面内容更快显示给用户。
而且，服务器端渲染对于那些不支持 JavaScript 的环境也同样有效，比如某些简易浏览器或者某些网络爬虫。通过将完整的 HTML 页面发送给客户端，我们能够确保在所有环境下都有较好的可访问性。
10. 结束语
server.set('view engine', 'html'); 这行代码背后蕴藏的细节，其实涉及了服务器与客户端协作的方式，尤其是在 Angular Universal 的上下文中，用于提供服务器端渲染的功能，以提高应用的首屏加载性能和搜索引擎的友好性。通过理解 Express 与 Angular 在服务器端如何协作，我们可以更好地构建高性能的 Web 应用。
这个配置使得 Angular 应用可以借助 ngExpressEngine 来渲染 Angular 模块，将其输出为动态的 HTML 内容，从而实现在服务器端对页面的快速渲染。在现代 Web 开发中，服务器端渲染已经成为应对复杂前端应用性能问题的重要工具，而通过视图引擎与渲染引擎的结合，可以让这一过程变得高效且容易管理。
网友评论