How can I force Spartacus to load a template

Question

how can I get Spartacus to load a specific template from the backend when the main module don't get bootstraped (web-component)?

My use case is as follows:

I have a site which is build with accelerator. I would like to migrate it to Spartacus step by step. First the header, then the footer and then the rest (move from accelerator to SPA only). My custom footer and header works in the Spartacus SPA. To integrate them into accelerator, I build web-components for the header and footer with ngx-build-plus. They work, but render only the static part of the component and not the slots of Spartacus. I also don't see the request to the backend.

AppModule:

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    B2cStorefrontModule.withConfig({
      backend: {
        occ: {
          baseUrl: environment.occBaseUrl,
          prefix: environment.occPrefix,
        },
      },
      context: {
        baseSite: ['de'],
        language: ['en'],
        currency: ['EUR'],
        urlParameters: ['baseSite', 'language'],
      },
      i18n: {
        resources: translations,
        chunks: translationChunksConfig,
        fallbackLang: 'en',
      },
      features: {
        level: '2.1',
      },
      breakpoints: {
        xs: 576,
        sm: 768,
        md: 992,
        lg: 1920,
      },
      layoutSlots: {
        WebxHomepageTemplate: {
          slots: [],
        },
      },
    }),
    BrowserTransferStateModule,
    UiHeaderModule,
  ],
  entryComponents: [AppComponent],
})
export class AppModule implements DoBootstrap {
  constructor(private injector: Injector) {}
  ngDoBootstrap(): void {
    const elm = createCustomElement(AppComponent, { injector: this.injector });
    customElements.define('wc-header', elm);
  }
}

AppComponent template:

<cx-storefront>
  <ng-template cxOutletRef="header">
    <ui-header></ui-header>
  </ng-template>
</cx-storefront>

dunqan dunqan · Accepted Answer · 2021-01-21T08:27:40

Most of the logic related to layout loading is tied to the routing, inside CmsPageGuard, and in your case navigation is not happening.

So, you can either try faking it (do the navigation in your component) or try to do all the steps manually. I think, what's needed, is to set proper page context (RoutingService.getPageContext()) and call CmsService.getPage (or hasPage) to trigger the load. Not sure if this is all, but I think it's a good start (and you should have layout and slots data loaded).

How can I force Spartacus to load a template

1 Answers