Question

我已经用动态服务器端渲染设置了Angular 7 Universal。一切正常，除了服务器端渲染的主组件内部的动态组件不会自身渲染。

在标头部分的渲染HTML示例下面：

<sb-app _nghost-sc0="" ng-version="7.0.3">
  <sb-header _ngcontent-sc0="" _nghost-sc1="">
    <div _ngcontent-sc1="" class="nav-topbar"></div>
    <nav _ngcontent-sc1="" class="navbar navbar-expand-lg navbar-light p-0" id="main-navbar">
      <div _ngcontent-sc1="" class="container d-flex align-items-center px-3">
      <a _ngcontent-sc1="" class="navbar-brand" href="/">
      <img _ngcontent-sc1="" alt="logo" class="navbar-logo" src="/assets/images/common/logo.svg" title="Logo">
      </a>
      <a _ngcontent-sc1="" class="cd-nav-trigger"><span _ngcontent-sc1=""></span></a><!----><!---->
        <ul _ngcontent-sc1="" class="nav nav-pills d-none d-md-flex ng-star-inserted">
          <li _ngcontent-sc1="" class="nav-item"><a _ngcontent-sc1="" class="nav-link" id="login">Login</a></li>
          <li _ngcontent-sc1="" class="nav-item"><a _ngcontent-sc1="" class="nav-link" id="register">Register</a></li>
        </ul>
      </div>
      
      <!-- THIS BELOW COMPONENT IS NOT RENDERED -->
      <sb-menu _ngcontent-sc1="" class="d-block d-md-none ng-tns-c9-0" _nghost-sc9=""><!----></sb-menu>
    </nav>
  </sb-header>
  ...
</sb-app>

我该如何解决此问题，以使<sb-menu>之类的标签也能显示？

Answer 1

您应该意识到Angular Universal依赖于以下事实：您的代码仅使用Angular机制，并且从不使用浏览器API（窗口，文档，导航器等），因为Node.js中不存在这些对象。

此外，如果您的组件之一依赖于通过script标记加载的外部库，那么这也不起作用，因为在执行服务器端渲染时Node.js不会加载客户端脚本。 / p>

如果您的组件之一未呈现，则可能是因为您的代码不符合上述规则。

Angular 7 Universal：内部组件未渲染

1 个答案: