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

Question

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

HOW：我现在的想法是有一些履带式的念想sitemap.xml文件检索所有站点的URL列表，然后将请求发送这些网址到安装Node.js的服务器和实例我的Angular（通用）应用程序正在运行。

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

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

Answer 1

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

我必须实现以下变化：

• 创建服务器应用模块和更新的浏览器应用程序模块在角普遍的指导说明
• 实施预渲染器脚本。预渲染器检查路由器配置并检索可用的应用程序路线。
• 对于每个URL预渲染生成HTML文件使用renderModuleFactory@angular/platform-server模块并保存生成的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' })。我仍然不知道初始导航是什么以及为什么它有帮助。

希望这会有所帮助。

Answer 2

您将需要/想要一个特殊的托管服务，将所有http请求指向根index.html。包含所有页眉页脚和Angular或SPA脚本的文件。否则，当你刷新或转到除“your-site /”之外的URL时，它最终会给你一些404错误。

这当然主要是一个问题，如果你基本上使用html5 push状态，如果你的前端路由器没有使用hash url'your-site /＃/'，但即使在使用hash时仍然可以运行网址。除非服务器环境支持为所有html或没有匹配的请求提供根index.html文件。

上述问题存在一些问题，但我绝对不推荐。基本上，如果您的服务环境服务支持此功能，则可以在您的404页面上再次提供相同的index.html。

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

你可以代替使用SPA框架，如角使用静态网站生成器。