如何为 Angular 应用预渲染静态 HTML 页面？答案

【问题标题】：How to pre-render pages in static HTML for an Angular app?如何为 Angular 应用预渲染静态 HTML 页面？
【发布时间】：2017-06-07 19:16:07
【问题描述】：

什么：我正在使用 Angular 构建一个网站，我想将它部署在纯静态服务器（例如 Amazon S3）上。我需要在部署之前为网站预渲染所有 HTML 页面，但我不知道如何继续。

如何：我目前的想法是让一些爬虫读取像sitemap.xml 这样的文件来检索所有站点 URL 的列表，然后将这些 URL 的请求发送到 Node.js 所在的服务器已安装并且我的 Angular（通用）应用程序的一个实例正在运行。

问题：这听起来像是正确的做法吗？我错过了重要的一步吗？是否有任何库或 npm 包可以帮助完成这项任务？

令人惊讶的是，我找不到任何关于 Angular 预渲染的文档（只有重新渲染）。我还查看了静态站点生成器以获取灵感，但它们都使用一堆静态文件作为起点（不是 URL 列表）。另外，我不想使用像 prerender.io 这样的第三方服务。

【问题讨论】：

或许universal.angular.io
您好，君特。就像我写的那样，在服务器上运行的应用程序确实是一个通用应用程序。但我的问题实际上是关于如何生成静态 HTML 文件，而不是关于如何在服务器端运行 Angular 应用程序。
我认为有一些方法可以持久化生成的输出。我还没有仔细研究环球。如果这不这样做，那么我想这将是困难的。为什么您实际上认为您需要预渲染所有内容。您可以将 Angular2 应用程序的构建输出部署到任何服务器就好了。
你是对的。但我这样做是出于好奇，也因为我喜欢在纯静态服务器上托管的好处（更好的性能，更简单的配置......）。这都是关于JAMstack ;-)。由于我正在构建的网站将有 600-700 个页面，因此预渲染看起来是一个不错的选择。 universal.angular.io/overview 的文档确实提到了预渲染，但它只说“使用构建工具生成静态 HTML”并且没有详细说明。
@AngularFrance，你找到解决方案了吗？

标签： angular

【解决方案1】：

我刚刚使用 Angular 4 完成了类似的任务。网站使用 Github 页面托管，没有后端。随意使用它作为示例：repo 和实现预渲染的提交：0d81d28

我必须实施以下更改：

创建服务器应用模块并更新浏览器应用模块，如 Angular 通用指南中所述
实现预渲染脚本。预渲染器检查路由器配置并检索可用的应用程序路由。
对于每个 URL，预渲染使用来自 @angular/platform-server 模块的 renderModuleFactory 生成 html 文件，并将生成的 html 保存在适当的位置。
正如 Bhargav 所说，静态文件服务器不支持任何 URL。所以如果你需要像/community/overview 这样的URL，那么应该将html 保存到/community/overview/index.html。角矩阵参数不起作用:(。我不得不将矩阵参数移动到 URL 路由中，例如，而不是 /docs;doc=overview.html 使用 /docs/overview.html
为了解决页面加载后烦人的闪烁问题，请将initialNavigation: 'enabled' 添加到路由器配置中：RouterModule.forRoot([{ path: '', ...}], { initialNavigation: 'enabled' })。我仍然不知道什么是 initialNavigation 以及它为什么有用。

希望这会有所帮助。

【讨论】：

FWIW 我创建了一个 Angular 文档问题，要求他们在这方面充实他们的指南。我参考了你的答案。 github.com/angular/angular/issues/23024
在写完这个答案一年后，作者切换到GatsbyJs，一个基于 React 的静态站点生成器...@Alexander，您能否解释一下为什么 Angular Universal 如此糟糕?
我从来没有为这个问题找到一个好的解决方案：github.com/angular/angular/issues/16051#issuecomment-328241418。如果页面 url 没有扩展名，这个问题几乎会破坏预渲染的好处
@AlexanderMatyushentsev 您的预渲染提交链接已损坏。