when I start the application in production mode (i.e. ng build --prod) the page is partially rendered. The issue presents itself also in SSR mode.
When in dev mode (JIT) the page is fully rendered.
I'll paste below the HTML code of the sole header tag, in the two modes. I removed comments, sensible data, and some list tags, in order to keep the second snippet as short as possible.
PROD html:
<header cxskiplink="cx-header" tabindex="-1">
<cx-page-layout section="header" class="header">
<cx-page-slot position="BannerSlot" class="BannerSlot has-components">
<cx-link>
<cx-generic-link>
<a role="link" href="/">Lorem ipsum dolor sit amet</a>
</cx-generic-link>
</cx-link>
</cx-page-slot>
<cx-page-slot position="SmartBannerSlot" class="SmartBannerSlot has-components">
</cx-page-slot>
<cx-page-slot position="HeaderComponentBlock1" class="HeaderComponentBlock1 has-components">
</cx-page-slot>
<cx-page-slot position="HeaderComponentBlock2" class="HeaderComponentBlock2 has-components">
<cx-searchbox>
<label class="searchbox"><input aria-label="search" placeholder="Search here...">
<cx-icon aria-label="reset" tabindex="0" class="reset cx-icon fas fa-times-circle"></cx-icon>
<cx-icon aria-label="search" tabindex="0" class="search cx-icon fas fa-search"></cx-icon>
</label>
<div class="results">
<div class="suggestions"></div>
</div>
</cx-searchbox>
</cx-page-slot>
<cx-page-slot position="HeaderComponentBlock6" class="HeaderComponentBlock6 has-components">
<cx-language-currency-selector>
<cx-site-context-selector context="language"></cx-site-context-selector>
<cx-site-context-selector context="currency"></cx-site-context-selector>
</cx-language-currency-selector>
</cx-page-slot>
<cx-page-slot position="HeaderComponentBlock4" class="HeaderComponentBlock4 has-components">
<cx-login>
<a role="link" href="/login">Sign In / Register</a>
</cx-login>
<cx-mini-cart>
<a aria-label="2 items currently in your cart" href="/cart">
<cx-icon class="cx-icon fas fa-shopping-cart"></cx-icon>
<span class="total"> 91,62 ₺ </span><span class="count"> 2 </span></a>
</cx-mini-cart>
</cx-page-slot>
<cx-page-slot position="HeaderComponentBlock5" class="HeaderComponentBlock5 has-components">
</cx-page-slot>
<cx-page-slot position="NavigationBar" class="NavigationBar has-components">
<e2-main-navigation-menu-container _nghost-spartacus-app-c306="">
<nav _ngcontent-spartacus-app-c306="" class="main-navigation">
<ul _ngcontent-spartacus-app-c306="" class="main-navigation__list">
<li _ngcontent-spartacus-app-c306=""></li>
<li _ngcontent-spartacus-app-c306=""></li>
<li _ngcontent-spartacus-app-c306=""></li>
<li _ngcontent-spartacus-app-c306=""></li>
<li _ngcontent-spartacus-app-c306=""></li>
<li _ngcontent-spartacus-app-c306=""></li>
<li _ngcontent-spartacus-app-c306=""></li>
</ul>
</nav>
</e2-main-navigation-menu-container>
</cx-page-slot>
</cx-page-layout>
<cx-page-layout section="navigation" class="navigation"></cx-page-layout>
</header>
DEV html:
<header cxskiplink="cx-header" ng-reflect-cx-skip-link="cx-header" ng-reflect-config="[object Object]" tabindex="-1"
class="mouse-focus">
<cx-page-layout section="header" ng-reflect-section="header" class="header">
<cx-page-slot ng-reflect-position="BannerSlot" ng-reflect-is-page-fold="false" position="BannerSlot"
class="BannerSlot has-components">
<cx-link>
<cx-generic-link>
<a role="link" href="/">Lorem ipsum dolor sit amet</a>
</cx-generic-link>
</cx-link>
</cx-page-slot>
<cx-page-slot ng-reflect-position="SmartBannerSlot" ng-reflect-is-page-fold="false" position="SmartBannerSlot"
class="SmartBannerSlot has-components">
<xyz-smart-banner _nghost-spartacus-app-c338=""></xyz-smart-banner>
</cx-page-slot>
<cx-page-slot ng-reflect-position="HeaderComponentBlock1" ng-reflect-is-page-fold="false"
position="HeaderComponentBlock1" class="HeaderComponentBlock1 has-components">
<xyz-logo _nghost-spartacus-app-c374="">
<div _ngcontent-spartacus-app-c374="" class="header-logo">
<xyz-children-iterator _ngcontent-spartacus-app-c374="" ng-reflect-component="[object Object]">
<xyz-simple-banner _nghost-spartacus-app-c336="">
<cx-generic-link _ngcontent-spartacus-app-c336="" ng-reflect-url="/">
<a role="link"
ng-reflect-router-link="/"
ng-reflect-query-params="[object Object]"
href="/">
<cx-media _ngcontent-spartacus-app-c336="" ng-reflect-container="[object Object]"
class="is-initialized"><img
src="https://example.com/logo.png"
alt="logo"></cx-media>
</a></cx-generic-link>
</xyz-simple-banner>
</xyz-children-iterator>
</div>
</xyz-logo>
</cx-page-slot>
<cx-page-slot ng-reflect-position="HeaderComponentBlock2" ng-reflect-is-page-fold="false"
position="HeaderComponentBlock2" class="HeaderComponentBlock2 has-components">
<cx-searchbox><label class="searchbox"><input aria-label="search" placeholder="Search here...">
<cx-icon aria-label="reset" tabindex="0" class="reset cx-icon fas fa-times-circle"
ng-reflect-type="RESET"></cx-icon>
<cx-icon aria-label="search" tabindex="0" class="search cx-icon fas fa-search"
ng-reflect-type="SEARCH"></cx-icon>
</label>
<div class="results">
<div class="suggestions"></div>
</div>
</cx-searchbox>
</cx-page-slot>
<cx-page-slot ng-reflect-position="HeaderComponentBlock6" ng-reflect-is-page-fold="false"
position="HeaderComponentBlock6" class="HeaderComponentBlock6 has-components">
<cx-language-currency-selector>
<cx-site-context-selector context="language" ng-reflect-context="language"></cx-site-context-selector>
<cx-site-context-selector context="currency" ng-reflect-context="currency"></cx-site-context-selector>
</cx-language-currency-selector>
</cx-page-slot>
<cx-page-slot ng-reflect-position="HeaderComponentBlock4" ng-reflect-is-page-fold="false"
position="HeaderComponentBlock4" class="HeaderComponentBlock4 has-components">
<xyz-login></xyz-login>
<cx-mini-cart><a ng-reflect-router-link="/,cart" aria-label="2 items currently in your cart" href="/cart">
<cx-icon class="cx-icon fas fa-shopping-cart" ng-reflect-type="CART"></cx-icon>
<span class="total"> XXX </span><span class="count"> 0 </span></a></cx-mini-cart>
</cx-page-slot>
<cx-page-slot ng-reflect-position="HeaderComponentBlock5" ng-reflect-is-page-fold="false"
position="HeaderComponentBlock5" class="HeaderComponentBlock5 has-components">
<xyz-icon-link _nghost-spartacus-app-c371=""><p _ngcontent-spartacus-app-c371="">icon-link works!</p>
</xyz-icon-link>
<xyz-icon-link _nghost-spartacus-app-c371=""><p _ngcontent-spartacus-app-c371="">icon-link works!</p>
</xyz-icon-link>
</cx-page-slot>
<cx-page-slot ng-reflect-position="NavigationBar" ng-reflect-is-page-fold="false" position="NavigationBar"
class="NavigationBar has-components">
<xyz-main-navigation-menu-container _nghost-spartacus-app-c390="">
<nav _ngcontent-spartacus-app-c390="" class="main-navigation">
<ul _ngcontent-spartacus-app-c390="" class="main-navigation__list">
<li _ngcontent-spartacus-app-c390="">
<xyz-navigation-bar-tab _nghost-spartacus-app-c391="" class="flyout">
<nav _ngcontent-spartacus-app-c391="">
<div _ngcontent-spartacus-app-c391="" class="main-navigation__item">
<cx-generic-link _ngcontent-spartacus-app-c391=""
ng-reflect-url="/someUrl"
ng-reflect-target="sameWindow">
<a role="link"
ng-reflect-router-link="/someUrl"
ng-reflect-query-params="[object Object]"
ng-reflect-target="sameWindow"
href="/someUrl"
target="sameWindow">
Somelink </a>
</cx-generic-link>
</div>
<div _ngcontent-spartacus-app-c391="" class="main-navigation__sidebar">
<xyz-children-iterator _ngcontent-spartacus-app-c391=""
class="main-navigation__sidebar--list"
ng-reflect-child-components="XYZNavigationBarListComponent">
<xyz-navigation-bar-list _nghost-spartacus-app-c393="">
<xyz-navigation-ui _ngcontent-spartacus-app-c393=""
class="main-navigation__sidebar-block main-navigation__sidebar-block--big flyout"
ng-reflect-skip-first-level="true"
ng-reflect-node="[object Object]">
<div class="wrapper">
<cx-generic-link class="all"
ng-reflect-url="/someUrl2">
<a role="link"
ng-reflect-router-link="/someUrl2"
ng-reflect-query-params="[object Object]" class="all"
href="/someUrl2"> Foo bar > </a>
</cx-generic-link>
<div class="childs" depth="2" columns="1">
<nav>
<cx-generic-link
ng-reflect-url="/someUrl3">
<a role="link"
ng-reflect-router-link="/someUrl3"
ng-reflect-query-params="[object Object]"
href="/someUrl3">
John Doe </a>
</cx-generic-link>
</nav>
<nav>
<cx-generic-link
ng-reflect-url="/someUrl4">
<a role="link"
ng-reflect-router-link="/someUrl4"
ng-reflect-query-params="[object Object]"
href="/someUrl4">
PERFUMES AS A GIFT </a>
</cx-generic-link>
</nav>
</div>
</div>
</xyz-navigation-ui>
</xyz-navigation-bar-list>
<xyz-navigation-bar-banner _nghost-spartacus-app-c331="">
<div _ngcontent-spartacus-app-c331=""
class="main-navigation__sidebar-block main-navigation__sidebar-block--right">
<h3 _ngcontent-spartacus-app-c331=""
class="navigation-banner__title"></h3>
<cx-generic-link _ngcontent-spartacus-app-c331=""
ng-reflect-url="/brand1">
<a role="link"
ng-reflect-router-link="/brand1"
ng-reflect-query-params="[object Object]"
href="/brand1">
<cx-media _ngcontent-spartacus-app-c331=""
ng-reflect-container="[object Object]"
class="is-initialized"><img
src="https:/example.com/image.png">
</cx-media>
</a>
</cx-generic-link>
</div>
</xyz-navigation-bar-banner>
</xyz-children-iterator>
</div>
</nav>
</xyz-navigation-bar-tab>
</li>
<li _ngcontent-spartacus-app-c390="">
<xyz-navigation-bar-tab _nghost-spartacus-app-c391="" class="flyout">
<nav _ngcontent-spartacus-app-c391="">
<div _ngcontent-spartacus-app-c391="" class="main-navigation__item">
<cx-generic-link _ngcontent-spartacus-app-c391=""
ng-reflect-url="/someUrlA"
ng-reflect-target="sameWindow">
<a role="link"
ng-reflect-router-link="/someUrlA"
ng-reflect-query-params="[object Object]"
ng-reflect-target="sameWindow"
href="/someUrlA"
target="sameWindow">
Dolor sit amet </a>
</cx-generic-link>
</div>
<div _ngcontent-spartacus-app-c391="" class="main-navigation__sidebar">
<xyz-children-iterator _ngcontent-spartacus-app-c391=""
class="main-navigation__sidebar--list"
ng-reflect-child-components="XXXNavigationBarListCom">
<xyz-navigation-bar-list _nghost-spartacus-app-c393="">
<xyz-navigation-ui _ngcontent-spartacus-app-c393=""
class="main-navigation__sidebar-block main-navigation__sidebar-block--big flyout"
ng-reflect-skip-first-level="true"
ng-reflect-node="[object Object]">
<div class="wrapper">
<cx-generic-link class="all"
ng-reflect-url="/someUrlB">
<a role="link"
ng-reflect-router-link="/someUrlB"
ng-reflect-query-params="[object Object]" class="all"
href="/someUrlB"> Jane Doe > </a>
</cx-generic-link>
<div class="childs" depth="2" columns="1">
<nav>
<h5 aria-label="ABC 123"
tabindex="0"> ABC 123
<cx-icon class="cx-icon fas fa-angle-down"
ng-reflect-type="CARET_DOWN"></cx-icon>
</h5>
<div class="wrapper">
<cx-generic-link class="all"
ng-reflect-url="/someUrlC">
<a role="link"
ng-reflect-router-link="/someUrlC"
ng-reflect-query-params="[object Object]"
class="all"
href="/someUrlC">
XYZ ZYC > </a>
</cx-generic-link>
<div class="childs" depth="1" columns="1">
<nav>
<cx-generic-link
ng-reflect-url="/someUrlD">
<a role="link"
ng-reflect-router-link="/someUrlD"
ng-reflect-query-params="[object Object]"
href="/someUrlD">
Bla Bla</a>
</cx-generic-link>
</nav>
</div>
</div>
</nav>
<nav>
<h5 aria-label="Blblblbl"
tabindex="0"> Blblblbl
<cx-icon class="cx-icon fas fa-angle-down"
ng-reflect-type="CARET_DOWN"></cx-icon>
</h5>
<div class="wrapper">
<cx-generic-link class="all"
ng-reflect-url="/someurlx">
<a role="link"
ng-reflect-router-link="/someurlx"
ng-reflect-query-params="[object Object]"
class="all"
href="/someurlx">
JJJJJ
> </a></cx-generic-link>
<div class="childs" depth="1" columns="1">
<nav>
<cx-generic-link
ng-reflect-url="/someurlY">
<a role="link"
ng-reflect-router-link="/someurlY"
ng-reflect-query-params="[object Object]"
href="/someurlY">
YYYYY </a>
</cx-generic-link>
</nav>
</div>
</div>
</nav>
</div>
</div>
</xyz-navigation-ui>
</xyz-navigation-bar-list>
</xyz-children-iterator>
</div>
</nav>
</xyz-navigation-bar-tab>
</li>
</ul>
</nav>
</xyz-main-navigation-menu-container>
</cx-page-slot>
</cx-page-layout>
<cx-page-layout section="navigation" ng-reflect-section="navigation" class="navigation"></cx-page-layout>
</header>
What can cause this?
Thanks