Angular - 将组件渲染为index.html中的静态内容和样式

Question

是否有可能在index.html文件中编写一个预构建为静态html的组件，以便该组件的静态内容在其他.js文件运行之前充当应用程序框架？

示例：我可以在<style>标记内输出任意数量的<app-root>标记和自定义静态html，这些标记对用户可见，直到JS文件运行。这通常是加载指标或其他。我想用我的标题，骷髅身体和我的页脚将它充实。但是我不想完全用手来处理这样做的痛苦。我想使用组件，样式等的标准Angular管道。不同之处在于我希望它在index.html文件中预先构建。

我最初的猜测是，这不可能完成，我只需处理它。但我以为我会咨询互联网。

Answer 1

我建议你使用Angular Universal。

总而言之，它会创建一个服务器端呈现的网站版本。服务器端呈现的页面是惰性的（除页面之间的链接之外没有动作或动画），客户端应用程序（JS文件）在后台加载，然后在完全加载时接管服务器端呈现的页面。

提供了一个布尔值，可以让您知道应用程序是在服务器上还是在客户端上呈现，因此您可以轻松实现以下行为：

1. 在服务器端显示带有加载器和灰色区域的降级页面
2. 在客户端接管时显示功能完整的页面

以下是主要优点：

• 首次加载应用程序时，会立即显示与您的用户相关的内容（您甚至可以显示后端的数据）。
• 为使用旧版本的javascript或根本没有javascript的搜索引擎启用搜索引擎优化（在我写这篇文章的时候，谷歌使用Chrome 41，这是非常古老而且不会抓取Angular应用程序）

一些缺点：

• 需要你在你的应用程序中进行一些（次要的）重构（主要是拦截器和依赖于加载script标签的JS文件的代码）
• 需要Node.js express服务器来为应用程序提供服务，而不是您正在使用的静态文件Web服务器

如果要检查其行为，请使用Angular Universal的应用程序示例：https://www.weflat.fr