Angular 7 Universal：不渲染内部组件答案

【问题标题】：Angular 7 Universal: inner components are not renderedAngular 7 Universal：不渲染内部组件
【发布时间】：2019-04-17 02:15:22
【问题描述】：

我已经设置了具有动态服务器端渲染的 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> 这样的标签也会被渲染？

【问题讨论】：

组件sb-menu是如何导入的？
该组件是在app.module.ts 中导入的，如果我在app.server.module.ts 中将它导入declarations，它会告诉我我导入了两次。 app.server.module.ts 中是否应该添加任何内容？
sb-menu 是指外部库还是您自己的组件之一？

标签： javascript angular server-side-rendering angular-universal angular7

【解决方案1】：

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

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

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

【讨论】：