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的搜索引擎启用SEO（在我撰写本文时，Google使用的Chrome 41相当老旧并且不会抓取Angular应用程序）

一些缺点：

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

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