Spartacus集成SAP CC时组件内容无法显示求助

在SAP CC项目中集成Spartacus 4.3.8，基于electronics-spa默认页面从零新建testPage1页面。在Hybris主项目的impex中配置了包含文本“contenido del parrafo”的CMSParagraphComponent，同时关联了默认页眉和页脚，但加载页面时该组件无法正常显示：[截图显示组件未正常加载]

相关配置代码 #

SAP Impex配置 #

$contentCatalog=electronicsContentCatalog
$contentCV=catalogVersion(CatalogVersion.catalog(Catalog.id[default=$contentCatalog]),CatalogVersion.version[default=Online])[default=$contentCatalog:Online]
$siteResource=jar:de.hybris.platform.spartacussampledata.constants.SpartacussampledataConstants&/spartacussampledata/import/contentCatalogs/electronicsContentCatalog

INSERT_UPDATE PageTemplate;$contentCV[unique=true];uid[unique=true];name;frontendTemplateName;restrictedPageTypes(code);active[default=true]
;;TestTemplate;Test Template;testPage;ContentPage

INSERT_UPDATE ContentSlotName;name[unique=true];template(uid,$contentCV)[unique=true][default='TestTemplate'];validComponentTypes(code);compTypeGroup(code)
;TopHeaderSlot;;;wide
;SiteLogo;;;logo
;HeaderLinks;;;headerlinks
;SearchBox;;;searchbox
;MiniCart;;;minicart
;NavigationBar;;;navigation
;Footer;;;footer
;TextfieldConfigContent;;CMSFlexComponent;narrow
;Space1;;CMSParagraphComponent;wide

INSERT_UPDATE ContentSlotForTemplate;$contentCV;uid[unique=true];position[unique=true];pageTemplate(uid,$contentCV)[unique=true][default='TestTemplate'];contentSlot(uid,$contentCV)[unique=true];allowOverwrite
;;TopHeaderSlot-TextfieldConfigPage;TopHeaderSlot;;TopHeaderSlot;true
;;SiteLogo-TextfieldConfigPage;SiteLogo;;SiteLogoSlot;true
;;HeaderLinks-TextfieldConfigPage;HeaderLinks;;HeaderLinksSlot;true
;;SearchBox-TextfieldConfigPage;SearchBox;;SearchBoxSlot;true
;;MiniCart-TextfieldConfigPage;MiniCart;;MiniCartSlot;true
;;NavigationBar-TextfieldConfigPage;NavigationBar;;NavigationBarSlot;true
;;Footer-TextfieldConfigPage;Footer;;FooterSlot;true

INSERT_UPDATE ContentPage;$contentCV[unique=true];uid[unique=true];name;masterTemplate(uid,$contentCV);label;defaultPage[default='true'];approvalStatus(code)[default='approved'];homepage[default='false']
;;testPage1;first test page;TestTemplate;/testPage1;;;

INSERT_UPDATE CMSParagraphComponent;$contentCV[unique=true];uid[unique=true];name;content[lang='en']
;;paragraphTest;paragraph test;"contenido del parrafo"

INSERT_UPDATE ContentSlot;$contentCV[unique=true];uid[unique=true];name;active;cmsComponents(uid,$contentCV)
;;contentSlotTest;content slot test;true;paragraphTest

INSERT_UPDATE ContentSlotForPage;$contentCV[unique=true];uid[unique=true];position[unique=true];page(uid,$contentCV)[unique=true];contentSlot(uid,$contentCV)[unique=true]
;;connetSlotForPageTest;Space1;testPage1;contentSlotTest

app.component.html代码 #

<cx-storefront></cx-storefront>

<ng-template cxOutletRef="SearchBoxComponent" style="color: aquamarine;">
</ng-template>

<ng-template cxOutletRef="ParagraphComponent" style="color: red;">
</ng-template>

<ng-template cxOutletRef="HeaderLinks" style="background-color:red;">
</ng-template>

<ng-template cxOutletRef="Space1" let-model>
    "Space1" position
</ng-template>

<li><a href="">Space1</a></li> 

custom-layout-config.ts代码 #

import { LayoutConfig } from '@spartacus/storefront';

export const testPage: LayoutConfig = {
  layoutSlots: {
    header: {
      lg: {
        slots: [
            'TopHeaderSlot',
            'SiteLogo',
            'HeaderLinks',
            'SearchBox',
            'MiniCart',
            'NavigationBar',
            
        ],
      },
      slots: ['TopHeaderSlot',
      'SiteLogo',
      'HeaderLinks',
      'SearchBox',
      'MiniCart',
      'NavigationBar'],
    },
    navigation: {
      lg: { slots: [] },
      slots: ['TextfieldConfigContent']
    },
    footer: {
      slots: ['Footer'],
    },
    TestTemplate: {
      pageFold: 'Space1',
      slots: ['Space1'],
    }
}};

问题排查及修复 #

1. 布局模板ID不匹配
   Spartacus通过frontendTemplateName关联页面模板和布局配置，你的Impex中TestTemplate的frontendTemplateName是testPage，但布局配置里用的是TestTemplate，导致布局无法匹配。修改custom-layout-config.ts中的模板键为testPage：

   // 替换原有的TestTemplate
   testPage: {
     pageFold: 'Space1',
     slots: ['Space1'],
   }
   

2. Outlet覆盖导致组件内容丢失
   app.component.html中的<ng-template cxOutletRef="ParagraphComponent">是空模板，会覆盖默认的ParagraphComponent渲染逻辑，导致组件内容不显示。解决方法二选一：

   • 删除这个空模板，恢复默认渲染；
   • 在模板中添加组件内容绑定：

     <ng-template cxOutletRef="ParagraphComponent" let-component style="color: red;">
       {{ component.content }}
     </ng-template>
     

3. 内容目录未同步
   导入Impex后，在Hybris后台执行内容目录同步（electronicsContentCatalog -> Online版本），确保配置已生效。

4. 前端缓存未清除
   清除浏览器localStorage中的cx-storefront键，或重启Spartacus前端服务，避免旧缓存影响页面渲染。

5. 语言一致性检查
   CMSParagraphComponent的content配置为lang='en'，确保当前站点的活跃语言是英文，或添加对应语言的内容配置。

内容的提问来源于stack exchange，提问作者JoseM