Trouble showing component content in Spartacus

Question

I'm trying to implement Spartacus with my SAP CC project. I loaded the electronics-spa default page and I'm making a new page from scratch inside there ("testPage1" have a ParagraphComponent which contains the text "contenido del parrafo" in an impex in the main SAP project, along with the default headers and footers.

But, when loading the page, said component doesn't load properly:

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

<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'],
        }
    }};

Every tutorial I come across hasn't helped so far, any help would be appreciated. PS: I'm using Spartacus version '4.3.8'

Answer 1

You are replacing the CMS-driven content of slot 'Space1' with cxOutletRef. cxOutletRef when used without cxOutletPos replaces the outlet entirely. That's why you see "Space1" position instead of contenido del parrafo.

Try removing this code:

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

Here's the documentation for reference: https://help.sap.com/docs/SAP_COMMERCE_COMPOSABLE_STOREFRONT/eaef8c61b6d9477daf75bff9ac1b7eb4/b98af37456b2493e8fd5e733931c5cb4.html?locale=en-US&q=outlets#template-driven-outlets