如何为Angular应用程序在静态HTML中预呈现页面?

时间:2017-01-23 10:04:31

标签: angular

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

如何:我目前的想法是让一些抓取工具读取sitemap.xml之类的文件来检索所有网站的网址列表,然后将这些网址的请求发送到Node所在的服务器安装了.js,我的Angular(通用)应用程序的一个实例正在运行。

问题:这听起来像是正确的方法吗?我错过了一个重要的步骤吗?是否有任何库或npm软件包可以帮助完成此任务?

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

2 个答案:

答案 0 :(得分:5)

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

我必须实施以下更改:

  • 按照角度通用指南
  • 中的说明创建服务器应用模块并更新浏览器应用模块
  • 实施预渲染器脚本。预渲染器检查路由器配置并检索可用的应用程序路由。
  • 对于每个网址,预渲染使用renderModuleFactory模块中的@angular/platform-server生成html文件,并将生成的html保存在适当的位置。
  • 由于Bhargav提到静态文件服务器不支持任何URL。因此,如果您需要包含/community/overview之类的网址,则应将html保存到/community/overview/index.html。角矩阵参数不能工作:(。我必须将矩阵参数移动到URL路由中,例如而不是/docs;doc=overview.html使用/docs/overview.html
  • 为了在页面加载后修复恼人的闪烁,请将initialNavigation: 'enabled'添加到路由器配置中:RouterModule.forRoot([{ path: '', ...}], { initialNavigation: 'enabled' })。我仍然不知道initialNavigation是什么以及为什么它会有所帮助。

希望这有帮助。

答案 1 :(得分:-1)

您需要/想要一个特殊的托管服务,将所有http请求定向到root index.html。包含所有页眉和Angular或SPA脚本的文件。否则当您刷新或转到“您的网站/'以外的网址”时根它最终会给你一些404错误。

当然,如果你的前端路由器没有使用哈希网址'你的网站/#/'你基本上使用html5推送状态,这当然主要是一个问题。但即使使用哈希网址,您仍然可以运行。除非服务器环境支持为所有html提供root index.html文件或没有匹配的请求。

围绕上述问题有各种各样的方法,但我当然不推荐它。如果您的服务环境服务支持此功能,您基本上会再次在404页面上提供相同的index.html。

所以基本上你需要设置自己的服务器或使用[Aerobatic] [1]

等服务

您可以使用静态网站生成器而不是使用像Angular这样的SPA框架。