如何为Angular应用以静态HTML预呈现页面? [英] How to pre-render pages in static HTML for an Angular app?
问题描述
内容:我正在使用Angular构建网站,并且希望将其部署在纯静态服务器(例如Amazon S3)上.在部署之前,我需要为网站预渲染所有HTML页面,并且不确定如何继续.
WHAT: I am building a website with Angular and I’d like to deploy it on a purely static server (such as Amazon S3). I need to pre-render all HTML pages for the site before deployment and I’m not sure how to proceed.
方法:我当前的想法是让某些爬网程序读取诸如sitemap.xml
之类的文件以检索所有站点URL的列表,然后将对这些URL的请求发送到Node.js所在的服务器已安装,并且我的Angular(通用)应用程序实例正在运行.
HOW: My current idea is to have some crawler read a file like sitemap.xml
to retrieve a list of all the site’s URLs, then send requests for these URLs to a server where Node.js is installed and an instance of my Angular (Universal) app is running.
问题:听起来像是正确的方法吗?我错过了重要的一步吗?是否有任何库或npm软件包可以帮助完成此任务?
QUESTION: Does it sound like the proper way to do it? Am I missing an important step? Are there any libraries or npm packages that could help in this task?
令人惊讶的是,我找不到关于Angular的预渲染的文档(仅用于RE渲染).我还查看了静态网站生成器的灵感,但是它们都使用一堆静态文件作为起点(而不是URL列表).另外,我也不想使用诸如prerender.io之类的第三方服务.
Surprisingly, I couldn’t find any documentation about pre-rendering for Angular (only RE-rendering). I’ve also looked at static site generators for inspiration, but they all use a bunch of static files as their starting point (NOT a list of URLs). Also, I don't want to use a third-party service like prerender.io.
推荐答案
我刚刚使用Angular 4完成了类似的任务.该网站使用Github页面托管,没有后端.随意使用它作为示例: repo 并提交实现预渲染的提交: 0d81d28
I've just completed similar task using Angular 4. Site is hosted using Github pages and has no backend. Feel free to use it as example: repo and commit which implements pre-rendering: 0d81d28
我必须进行以下更改:
- 按照角度通用指南"中的说明创建服务器应用程序模块并更新浏览器应用程序模块
- 实施预渲染器脚本.预渲染器检查路由器配置并检索可用的应用程序路由.
- 对于每个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是什么,以及为什么有帮助.
- Create server app module and update browser app module as described in angular universal guide
- Implement pre-renderer script. Pre-renderer inspects router configuration and retrieve available app routes.
- For each URL pre-render generates html file using
renderModuleFactory
from@angular/platform-server
module and saves generated html in appropriate location. - As Bhargav mentioned static files server won't support any URL. So if you need to have URL like
/community/overview
then html should be saved into/community/overview/index.html
. Angular matrix params wan't work :( . I had to move matrix params into URL route e.g. instead of/docs;doc=overview.html
use/docs/overview.html
- In order to fix annoying flickering after page loading, add
initialNavigation: 'enabled'
into router configuration:RouterModule.forRoot([{ path: '', ...}], { initialNavigation: 'enabled' })
. I still have no idea what initialNavigation is and why it helps.
希望这会有所帮助.
这篇关于如何为Angular应用以静态HTML预呈现页面?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!