服务器渲染 DOM 的一部分并将其注入到 Angular 应用程序中

Question

假设我们有一个标准的浏览器 Angular（现在是 v.11）仪表板应用程序：仪表板包含小部件，这些小部件是从 API 获取数据并显示值（KPI、图表、表格等）的组件。

问题是：有没有办法在服务器上呈现小部件并将它们注入仪表板 DOM 中？

由于这些小部件是 Angular 组件，我的想法是 Angular 是否可以在服务器上运行，将组件编译为静态 DOM 并将其注入运行 Angular 应用程序的浏览器。

我试过 Universal 但那真的是为了预渲染第一页，不认为它对这种情况有好处，或者？

谢谢！

Answer 1

Universal 可以预渲染 appmodule 的所有组件，只要您转到该页面的路由，Universal 也会预渲染它们，而不仅仅是第一页。

如果您找不到通用的完美解决方案，您可以使用 puppeteer 来预渲染该页面。请查找下面的参考。