使用Angular Universal构建可渲染的Web应用程序

Angular Universal是Angular的一个插件，它可以用于构建可渲染的Web应用程序。传统的Angular应用程序通常在浏览器中运行，并在运行时生成HTML、CSS和JavaScript。

然而，这种方法对于搜索引擎优化(SEO)和首次加载性能来说并不是最有效的。搜索引擎爬虫通常只能识别并解析HTML，而JavaScript动态生成的内容在爬取时无法被正确解析。此外，加载大量的JavaScript文件会导致首次加载时间变长，影响用户的体验。

Angular Universal通过在服务器上动态生成HTML，将这些问题解决了。它能够提供一份预渲染的HTML，使搜索引擎能够正确解析网页内容，并且可以更快地进行首次加载。

下面是使用Angular Universal构建可渲染的Web应用程序的基本步骤：

步骤1：安装Angular Universal

首先，你需要安装Angular Universal。打开终端并运行以下命令：

ng add @nguniversal/express-engine

这将为你的Angular应用程序添加Angular Universal所需的依赖项、配置和文件。

步骤2：创建服务器端渲染的组件

接下来，你需要创建一个组件来处理服务器端渲染的逻辑。这个组件负责生成适当的HTML以供搜索引擎爬取。

将以下代码添加到名为server.ts的新文件中：

import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';

// App server
export function app() {
  const server = express();
  const distFolder = join(process.cwd(), 'dist/angular-universal-demo/browser');
  const indexHtml = existsSync(join(distFolder, 'index.html'))
    ? 'index.html'
    : 'index';

  server.engine(
    'html',
    ngExpressEngine({
      bootstrap: AppServerModule,
    })
  );

  server.set('view engine', 'html');
  server.set('views', distFolder);

  server.get(
    '*.*',
    express.static(distFolder, {
      maxAge: '1y',
    })
  );

  server.get('*', (req, res) => {
    res.render(indexHtml, { req });
  });

  return server;
}

// Run server
function run() {
  const port = process.env.PORT || 4000;

  const server = app();
  server.listen(port, () => {
    console.log(`Node server listening on http://localhost:${port}`);
  });
}

// Enable production mode unless running locally
if (environment.production) {
  enableProdMode();
}

// Start server
run();

这个文件是服务器端的主要逻辑。它使用Express框架创建了一个服务器实例，并设置了HTML引擎。它还静态地提供静态文件，并在每个请求上渲染一个适当的HTML。

步骤3：构建和部署

在执行此步骤之前，请确保你的Angular应用程序已经拥有一个可供构建和部署的版本。可以通过运行以下命令来构建应用程序：

ng build --prod

这将生成一个可供生产环境部署的构建文件。

接下来，你需要将构建文件和服务器代码部署到一个服务器上。你可以选择自己喜欢的服务器提供商，如AWS、Azure或Google Cloud。

步骤4：测试和优化

最后，你需要测试和优化你的应用程序。通过使用Google的PageSpeed Insights或Lighthouse等工具，你可以检查你的应用程序的性能和SEO效果，并做出相应的优化。

通过使用Angular Universal构建可渲染的Web应用程序，你可以提高搜索引擎优化和首次加载性能。这是建立现代Web应用程序的一种强大方式，可以更好地满足用户和搜索引擎的需求。

希望这篇博客有助于你了解和开始使用Angular Universal来构建可渲染的Web应用程序。祝你成功！

本文来自极简博客，作者：科技创新工坊，转载请注明原文链接：使用Angular Universal构建可渲染的Web应用程序