Angular2 universal 如何在后台渲染-JavaScript中文网-JavaScript教程资源分享门户

随着 Web 应用程序越来越复杂，SEO （搜索引擎优化）和性能问题成为了开发者们的日常工作，这促使着我们不断探寻更加高效和可维护的 Web 应用开发方式。Angular2 Universal 是一种旨在解决 SEO 和性能问题的解决方案。它采用预渲染的方式将应用程序呈现为 HTML，从而使搜索引擎能够更好地理解和索引您的应用程序。

本文将介绍 Angular2 Universal 是什么，以及如何在后台渲染的过程中使用它。首先，我们将简单介绍 Angular2 Universal 的概念和其工作原理。然后，我们将着重讨论如何将它应用到我们的实际项目中。最后，我们将提供一些示例代码和指导意义来帮助您更好地理解和应用 Angular2 Universal。

什么是 Angular2 Universal

Angular2 Universal 是 Angular 团队提供的一种服务器端渲染（SSR）解决方案。它可以将应用程序在服务器上进行渲染，以便搜索引擎和社交媒体等可以更好地理解和索引您的应用程序。同时，它还可以提高应用程序的性能，因为我们可以通过将 HTML 发送给客户端来更快地完成渲染。

“预渲染”是 Angular2 Universal 的工作原理。通过预渲染，我们可以在向客户端发送应用程序之前，将应用程序呈现为 HTML。这样，当客户端加载应用程序时，它将更快地渲染，因为 HTML 已经被发送。这样可以减少 HTTP 请求和减轻服务器负载。

在后台渲染中使用 Angular2 Universal

在将 Angular2 Universal 应用到我们的实际项目中之前，我们需要确保我们的项目满足以下要求：

项目是 Angular2 或以上版本；
项目使用了 Angular 路由；
项目基于 Angular CLI 创建。

如果您的项目满足上述要求，那么现在我们可以开始在后台渲染中使用 Angular2 Universal。

第一步：安装 Angular2 Universal

首先，我们需要安装 Angular2 Universal。我们可以通过以下命令来安装：

npm install --save @nguniversal/express-engine

第二步：创建服务端文件

接下来，我们需要为我们的项目创建服务器端文件。我们可以通过在项目的根目录下，运行以下命令来快速创建服务器端文件：

ng generate universal

这个命令将在我们的 src/ 目录下创建一个新目录 server/，其中包含以下文件：

app.module.server.ts: 作为服务器端应用程序的根模块。
server.ts: 应用程序的服务器脚本。

我们需要根据我们的应用程序来更新这些文件。但是，在这里我们不会对每个文件进行详细讨论。如果您需要更多关于 Angular2 Universal 相关文件的信息，请参阅官方文档。

第三步：编写服务器端代码

接下来，我们需要编写服务器端代码。我们需要在 server.ts 文件中创建一个简单的 Express 应用程序，以便提供服务。

以下是一个简单的例子：

// www.javascriptcn.com code example
import 'zone.js/dist/zone-node';
import 'reflect-metadata';

import { enableProdMode } from '@angular/core';
import * as express from 'express';
import { join } from 'path';

import { ngExpressEngine } from '@nguniversal/express-engine';

enableProdMode();

const app = express();

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

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

app.use(express.static(join(__dirname, 'dist')));

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

const port = process.env.PORT || 8080;

app.listen(port, () => {
  console.log(`Listening on port ${port}`);
});

这里我们首先引入了所需的依赖。我们接着使用 enableProdMode() 函数启用生产模式。

我们使用 Express 创建了一个应用程序，然后设置了模板引擎，并将路由指向我们的根模块 AppServerModuleNgFactory。

最后，我们启动服务器并开始监听 HTTP 请求。

第四步：生成预渲染的 HTML 文件

现在，我们已经设置好服务器，并且准备好开始预渲染我们的应用程序。

要生成预渲染的 HTML 文件，我们需要安装 @nguniversal/builders。我们可以通过以下命令来安装：

npm install --save-dev @nguniversal/builders

之后，我们可以使用以下命令来生成预渲染的 HTML 文件：

ng run myapp:prerender

这个命令将在我们的 dist/ 目录下生成一个名为 browser 的子目录，其中包含预渲染的 HTML 文件。

第五步：服务静态 HTML 文件

现在我们已经成功生成了预渲染的 HTML 文件。我们需要将它们用于服务器端渲染。我们可以通过以下代码来服务这些静态 HTML 文件：

app.use(express.static(join(__dirname, 'dist', 'browser'), {
  index: false
}));

app.get('*', (req, res) => {
  res.sendFile(join(__dirname, 'dist', 'browser', 'index.html'));
});

这里我们使用 Express 的 express.static() 方法来服务以预渲染的 HTML 文件目录为根目录的静态文件。我们还使用 res.sendFile() 方法，将 index.html 文件作为响应发送给客户端。

第六步：构建并运行服务器

现在我们已经在我们的应用程序中设置了一个服务器，并且可以成功预渲染和服务静态 HTML 文件。我们现在可以构建和运行它。

我们可以使用以下命令来构建应用程序，并在服务器上运行它：

npm run build:ssr && npm run serve:ssr

这会将我们的应用程序编译为服务器端渲染的版本。然后，我们将该版本运行在服务器上。

我们也可以使用服务器上的 PM2 进行部署。这里不再赘述。更多信息请参考官方文档。

第七步：检查是否成功预渲染

最后，我们需要检查是否已经成功预渲染了我们的应用程序。

我们可以使用 Chrome 浏览器中的开发者工具来检查预渲染的结果。在 "Elements" 面板中，可以看到页面是否已被预渲染。如果已经预渲染，我们应该看到 DOM 元素，而不是例行的应用程序脚本和占位符。

示例代码

在这里，我们提供了一个简单的 Angular2 Universal 项目示例，以帮助您更好地理解它的原理和应用。您可以从这个 GitHub 仓库中获取示例代码。

指导意义

Angular2 Universal 是一种有益的工具，它可以使我们的 Web 应用程序更加高效并避免一些问题。尽管在一开始应用它可能会有一些困难，但一旦它被正确地应用到我们的实际项目中，我们将获得许多好处。

在将其应用于实际项目之前，我们需要充分了解其工作原理并通过教程、官方文档等途径充分了解其应用方法。我们还可以通过使用一些简单的示例代码来更好地理解其原理和应用。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d00cb2e46428fe9ec9181e

Angular2 universal 如何在后台渲染