如何在现有的 Angular 应用程序中实现 Angular Universal

在现有的 Angular 应用程序中实现 Angular Universal

如果您是一名 Angular 开发人员，您就会知道创建快速且可扩展的 Web 应用程序有多么重要。实现这一目标的一种方法是将 Angular Universal 实现到您现有的 Angular 应用程序中。本文将解释 Angular Universal 是什么、它的好处，以及如何将它实现到您现有的 Angular 应用程序中。

什么是 Angular 通用？

Angular Universal 是 Angular 的服务器端渲染 (SSR) 解决方案。它允许您在服务器上生成静态 HTML 并将其发送到客户端进行渲染。这与客户端呈现不同，在客户端呈现中，浏览器处理 JavaScript 并在初始加载后构建页面。

使用 Angular Universal，初始 HTML 有效负载包含使应用程序对用户可见的所有必要内容，从而显着缩短网页的加载时间。此功能对于搜索引擎优化 (SEO) 尤为重要，因为搜索引擎更喜欢快速加载的页面。

Angular Universal 还在低网络连接上提供了更好的性能，这对于通过移动设备浏览网页或在互联网连接不良的地区浏览网页的用户来说至关重要。

使用 Angular Universal 的好处

Angular Universal 提供了几个好处，包括：

• 改进的性能：通过在服务器上呈现内容，页面加载时间更快，从而带来更好的用户体验。
• 更好的 SEO：Angular Universal 生成静态 HTML，这对 SEO 更好，因为它更容易被搜索引擎抓取和索引。
• 更好的用户体验：由于初始页面已经在服务器端加载，用户可以更快地看到内容，从而改善他们的体验。
• 渐进式 Web 应用程序 (PWA) 兼容性：Angular Universal 支持 Service Worker API，这是构建 PWA 所必需的。

你需要什么来实现 Angular Universal？

要实现 Angular Universal，您需要具备以下条件：

• Node.js with npm：Angular Universal 基于 Node.js，所以你需要在你的机器上安装它。您可以从官方网站 ( nodejs.org/ )下载 Node.js。
• Angular CLI：您需要 Angular CLI 来生成和管理您的 Angular 应用程序。您可以通过npm install -g @angular/cli在命令提示符下运行来安装它。
• Angular Universal 包：你可以通过运行ng add @nguniversal/express-engine.

如何在现有的 Angular 应用程序中实现 Angular Universal？

在现有的 Angular 应用程序中实现 Angular Universal 并不困难。您可以按照以下步骤操作：

第 1 步：创建 Angular 应用程序

如果您还没有 Angular 应用程序，则需要创建一个。ng new my-app您可以通过在命令提示符下运行来创建 Angular 应用程序。此命令将生成一个具有默认配置的新 Angular 应用程序。

第 2 步：添加 Angular 通用包

创建 Angular 应用程序后，您需要向其添加 Angular Universal 包。ng add @nguniversal/express-engine您可以通过在命令提示符下运行来执行此操作。此命令会将 Angular 通用包及其依赖项添加到现有的 Angular 应用程序中。

第三步：生成服务器文件

将 Angular Universal 包添加到应用程序后，您需要生成服务器文件。ng generate universal my-app您可以通过在命令提示符下运行来执行此操作。此命令将为 Angular Universal 生成必要的文件。

第 4 步：构建您的应用程序

生成服务器文件后，您需要构建应用程序。npm run build:ssr您可以通过在命令提示符下运行来执行此操作。此命令将使用 Angular Universal 构建您的应用程序。

第 5 步：提供您的应用程序

使用 Angular Universal 构建应用程序后，您需要为其提供服务。npm run serve:ssr您可以通过在命令提示符下运行来执行此操作。此命令将在服务器端启动您的应用程序。

结论

总之，在您现有的 Angular 应用程序中实施 Angular Universal 可以通过在服务器端呈现内容来极大地提高其性能，从而缩短加载时间、改善 SEO 并改善用户体验。

借助 Angular Universal，您可以利用服务器端渲染并为您的用户提供更好的用户体验。按照上述步骤，您将开始在现有的 Angular 应用程序中实现 Angular Universal。