Angular 7 Universal: inner components are not rendered

Question

I have set up Angular 7 Universal with dynamic server-side rendering. Everything works fine except for the fact that dynamic components inside the main component being server-side rendered are not rendered themselves.

Below an example rendered HTML of a header section:

 <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>

How do I address this issue so that also tags like <sb-menu> get rendered?

Answer 1

You should be aware that Angular Universal relies on the fact that your code uses only Angular mechanisms and never uses the browser API (window, document, navigator, etc...) since these objects do not exist in Node.js.

Also, if one of your components relies on an external library loaded via a script tag, that won't work either, since Node.js won't load client scripts when performing server-side rendering.

If one of your components doesn't render, it's probably because your code doesn't comply with the rules above.