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

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

HOW:我目前的想法是让一些爬虫读取一个文件,比如sitemap.xml检索所有网站的URL列表,然后将这些URL的请求发送到安装了Node.js的服务器,我的Angular(通用)应用程序的实例是运行.

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

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

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

我必须实现以下更改:

按角度通用指南中的说明创建服务器应用模块并更新浏览器应用模块

实现预渲染器脚本.预渲染器检查路由器配置并检索可用的应用程序路由.

对于每个URL,预渲染使用renderModuleFactoryfrom @angular/platform-servermodule 生成html文件,并将生成的html保存在适当的位置.

正如Bhargav提到的静态文件服务器不支持任何URL.因此,如果你需要有像/community/overviewhtml 那样的URL 应保存到/community/overview/index.html.角矩阵参数不能工作:(.我必须将矩阵参数移动到URL路径中,例如而不是/docs;doc=overview.html使用/docs/overview.html

为了在页面加载后修复恼人的闪烁,请添加initialNavigation: 'enabled'到路由器配置中:RouterModule.forRoot([{ path: '', ...}], { initialNavigation: 'enabled' }).我仍然不知道initialNavigation是什么以及为什么它有帮助.

希望这可以帮助.