angular - 如何为 Angular 应用程序预渲染静态 HTML 页面？

Question

内容:我正在使用 Angular 构建一个网站，我想将其部署在纯静态服务器(例如 Amazon S3)上。我需要在部署之前预呈现站点的所有 HTML 页面，但我不确定如何继续。

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

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

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

Answer 1

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

我必须实现以下更改:

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

希望这对您有所帮助。