问题描述
当我以生产模式（即 ng build --prod）启动应用程序时，页面会部分呈现。这个问题也出现在 SSR 模式中。
在开发模式 (JIT) 下，页面完全呈现。
我将在两种模式下粘贴在唯一标头标记的 HTML 代码下方。 我删除了评论、合理数据和一些列表标签，以保持第二个片段尽可能短。
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>
什么会导致这种情况？
谢谢
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）