Spartacus Breakpoint Configuration

Question

I am trying to use a custom breakpoint config. Since there is no real documentation, I checked the code of the BreakpointService. As far as I understand, I should be able to do a custom breakpoint config like this as part of the SpartacusConfigurationModule:

providers: [
   provideConfig(<LayoutConfig>{
      breakpoints: {
        [BREAKPOINT.xs]: {
          max: 767,
        },
        [BREAKPOINT.sm]: {
          min: 768,
          max: 959,
        },
        [BREAKPOINT.md]: {
          min: 960,
          max: 1199,
        },
        [BREAKPOINT.lg]: {
          min: 1200,
          max: 1679,
        },
        [BREAKPOINT.xl]: {
          min: 1680,
        }
      },
   }
]

After adding the above config and using the breakpoint service, I still get the default breakpoints hardcoded into the spartacus code.

As soon as I add the following Code to my app.module.ts, it works correctly:

   imports: [
      ConfigModule.withConfig(<LayoutConfig>{// above config}),
   ]

Any Idea why provideConfig within the SpartacusFeatureModule is not enough?

Answer 1

TLDR

Provide your custom layout config after the BaseStorefrontModule.

Explanation

All the config chunks are deep-merged in the order of being provided.

Because the SpartacusConfigurationModule in your app is imported before BaseStorefrontModule (which inside provides the default layout), the default config "wins" and overwrite your config. So to fix the problem, your layout config needs to be provided after the Spartacus' module BaseStorefrontModule is imported.

See the implementation of OOTB SpartacusModule in your app:

@NgModule({
  declarations: [],
  imports: [
    SpartacusFeaturesModule,
    SpartacusConfigurationModule, // <-- your custom layout config is provided inside
    BaseStorefrontModule // <-- it imports inside LayoutModule which provides the default layout config

    // ... the last provided config wins

  ],
  exports: [BaseStorefrontModule]
})
export class SpartacusModule { }

Spartacus issue

In general you shouldn't be concerned about the priority of default configs vs. custom configs, because Spartacus provides most of the config chunks via provideDefaultConfig(), which by design has a lower priority than custom config chunks. Unfortunately at the moment of writing there a few leftovers using provideConfig() inside source code of spartacus libs, which makes them competing in priority with custom configs. It's the case for example for the default layout config (see implementation of LayoutModule).

The issue is tracked in the ticket https://github.com/SAP/spartacus/issues/15621