Angular 7 Universal:不渲染内部组件

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在执行服务器端渲染时不会加载客户端脚本。

如果您的某个组件没有呈现，可能是因为您的代码不符合上面的规则。