Angular Universal - 在 main.js 加载后渲染答案

【问题标题】：Angular Universal - Render once main.js loadsAngular Universal - 在 main.js 加载后渲染
【发布时间】：2020-09-23 14:33:56
【问题描述】：

我正在运行一个 Angular Universal 项目。我遇到的问题是我的页面在主包完全加载之前开始渲染，导致渲染不正确。

当 main.js 加载时，网站会正确呈现。当网站在慢速网络连接上加载时，这会导致难看的闪烁。

我可以做些什么来延迟渲染直到 main.js 完成加载？

【问题讨论】：

标签： angular angular-universal

【解决方案1】：

您需要为 RouterModule InitialNavigation 添加一个额外的选项，并将其设置为“启用”。

当设置为启用时，初始导航在创建根组件之前开始。引导程序被阻止，直到初始导航完成。该值是服务器端渲染工作所必需的。

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes, {
        initialNavigation: 'enabled'     
    })
  ],
  exports: [RouterModule]
})

参考：https://angular.io/api/router/InitialNavigation

【讨论】：

这不会改变任何东西。该站点仍会在加载包之前尝试呈现。
使用universal的想法是提供页面的预渲染HTML内容......如果组件可见性取决于main.js，这可能会导致这种闪烁。如果您可以分享您所面临的异常行为的屏幕截图
感谢您的帮助。是的，渲染的组件依赖于 main.js 中的一个库。这是它在加载之前的样子：ibb.co/NTh4JPZ 这是它应该看起来的样子：ibb.co/XFtNJLb 一旦 main.js 和 ng-slider 在 main.js 加载，它就会修复。这可以在blika.is 看到
所以我猜您的问题是您的 HTML 和样式的品牌问题，与 Universal 无关...尝试在组件样式文件中添加与滑块相关的样式，而不是在全局样式中添加样式。 scss 并确保在滑块插件初始化之前滑块正确呈现。

【解决方案2】：

确保仅在 dom 渲染完成后引导客户端应用程序。

main.ts

platformBrowserDynamic().bootstrapModule(AppModule);

document.addEventListener('DOMContentLoaded', () => {
  platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));
});

【讨论】：

谢谢，我以前也有过这样的，但是没用。我最终隐藏了滑块，直到调用 ngAfterViewChecked。不是最佳解决方案，但它有效。