如何设置 Angular 通用模块以抓取 Angular 11 应用程序？答案

【问题标题】：How do I Setup the Angular Universal Module for crawling of Angular 11 app?如何设置 Angular 通用模块以抓取 Angular 11 应用程序？
【发布时间】：2021-06-05 17:26:20
【问题描述】：

我正在设置一个新的 Angular 11 应用程序，我想使用 Angular 通用模块让我的应用程序可抓取。然而，当我在网上搜索时，结果主要是指构建一个 Angular 通用应用程序，我们希望避免这种情况。

如何设置 Angular 通用模块，以便正确抓取我们的 SPA（而不仅仅是安装它）？在开发新页面/组件时，我们是否需要做一些额外的事情？

谢谢！

【问题讨论】：

您可以将 Angular Universal 添加到现有应用程序中。这里有一个简单的指南：stackoverflow.com/questions/50277352/…
感谢@bjdose，这看起来正是我想做的！因此，每次我想运行应用程序时，我都应该使用它而不是 npm run -> npm run build:ssr && npm run serve:ssr ？顺便说一句，请将此作为答案提交，以将其标记为正确！ :-)

标签： angular seo angular-universal angular-module

【解决方案1】：

您可以将 Angular Universal 添加到现有应用中。这里有一个简单的指南：

Angular universal on existing project

您需要运行 npm run build:ssr 来获取包含您应用的所有捆绑包的 dist 文件夹并运行 npm run serve:ssr 来启动您的项目。

当然，您可以创建一个脚本来只运行两个进程一次。示例：

"build:ssr:prod": "first:command && second:command"

我建议您实施像 Jenkins 这样的工具或类似的工具来自动执行此任务。有很多方法可以自动部署应用程序。目前我使用 Jenkins 来构建和部署我的 Angular 通用应用程序。

【讨论】：