npm 包 angular2-platform-node 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

Angular2 是一个由 Google 团队开发的 Web 应用框架，它提供了一种简单易用的方式来构建 Web 应用。而 npm 是 Node.js 的包管理器，它提供了一种简单易用的方式来管理第三方依赖。在本篇文章中，我们将介绍一个 npm 包 angular2-platform-node，它是用来在 Node.js 中渲染 Angular2 应用的。

快速开始

安装 angular2-platform-node

要使用 angular2-platform-node，我们首先需要安装它。可以使用 npm 来安装：

npm install angular2-platform-node --save

创建一个 Angular2 应用

接下来，我们需要创建一个 Angular2 应用。可以使用 Angular CLI 来创建一个新的应用：

ng new my-app

编写服务端代码

现在我们来编写服务端代码。首先，我们需要引入所需的模块：

import { renderModuleFactory } from '@angular/platform-server';
import { enableProdMode } from '@angular/core';
import { readFileSync } from 'fs';
import { join } from 'path';
import * as express from 'express';
import 'zone.js/dist/zone-node';
import { AppServerModuleNgFactory } from './dist/server/main';

其中 @angular/platform-server 提供了用于在 Node.js 中渲染 Angular2 应用的 renderModuleFactory 方法，@angular/core 提供了 enableProdMode 方法，用于在生产环境中启用一些优化，fs 模块提供了读取文件的能力，path 模块提供了解析路径的能力，express 模块提供了构建 HTTP 服务器的能力，zone.js/dist/zone-node 提供了为应用提供 Zone 环境的能力，AppServerModuleNgFactory 是用 ngc 编译器编译后的 AppServerModule 的工厂。

接下来，我们需要启用一些优化：

enableProdMode();

然后，我们需要读取编译后的 index.html 文件，并创建一个 express 应用：

const index = readFileSync(join(__dirname, 'dist', 'browser', 'index.html'), 'utf8');
const app = express();

现在，我们需要为 app 注册一个处理所有路由的中间件：

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

这个中间件会将编译后的 index.html 返回给客户端。但由于我们使用的是单页面应用，所有的路由都应该返回同样的 index.html，所以我们使用了通配符 *。

最后，我们还需要为 app 注册一个处理错误的中间件：

app.use((err, req, res, next) => {
  console.error(err.stack);
  res.status(500).send('Something went wrong!');
});

这个中间件会将所有未处理的错误返回 500 状态码，并输出错误信息。

运行服务端应用

现在我们已经编写出了服务端代码，可以在终端中运行它：

node dist/server

这样就启动了一个 HTTP 服务器，所有访问服务端地址的请求都会被拦截，并返回编译后的 index.html 文件。

渲染 Angular2 应用

现在我们还需要在服务端渲染 Angular2 应用。在上面提到的 @angular/platform-server 模块提供了 renderModuleFactory 方法，它可以用来渲染 Angular2 应用。我们需要在 app.get 的回调函数中调用它：

renderModuleFactory(AppServerModuleNgFactory, { document: index, url: req.url })
  .then(html => {
    res.status(200).send(html);
  });

这个方法需要两个参数：AppServerModuleNgFactory 和 options。options 中的 document 表示要渲染的 HTML 文件内容，url 表示要请求的 URL。调用这个方法会返回一个 Promise，它的结果是渲染后的 HTML 字符串。

如果渲染过程中发生了错误，就需要用到 try...catch... 语句：

try {
  renderModuleFactory(AppServerModuleNgFactory, { document: index, url: req.url })
    .then(html => {
      res.status(200).send(html);
    });
} catch (e) {
  next(e);
}

这个 try...catch... 语句会捕获渲染过程中出现的错误，并交给错误处理中间件。

现在，我们已经成功地在服务端渲染了 Angular2 应用。客户端访问服务端地址时，会先请求编译后的 index.html，然后再使用渲染后的 HTML 字符串替换原来的内容，从而完成渲染。

示例代码

-- -------------------- ---- -------
------ - ------------------- - ---- ---------------------------
------ - -------------- - ---- ----------------
------ - ------------ - ---- -----
------ - ---- - ---- -------
------ - -- ------- ---- ----------
------ -------------------------
------ - ------------------------ - ---- ---------------------

-----------------

----- ----- - ---------------------------- ------- ---------- -------------- --------
----- --- - ----------

------------ ----- ---- ----- -- -
  --- -
    --------------------------------------------- - --------- ------ ---- ------- --
      ---------- -- -
        ---------------------------
      ---
  - ----- --- -
    --------
  -
---

------------- ---- ---- ----- -- -
  -------------------------
  ------------------------------- ---- ---------
---

---------------- -- -- -
  ------------------- --------- -- ---- -------
---

结论

在本篇文章中，我们介绍了一个 npm 包 angular2-platform-node，它是用来在 Node.js 中渲染 Angular2 应用的。通过学习本文的内容，您可以了解到如何使用 angular2-platform-node，以及如何在服务端渲染 Angular2 应用。希望这篇文章对您有所帮助。

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