Outlets duplicated in Spartacus 6

[JudithMMolina]

Describe the bug Outlets are duplicated post Spartacus upgrade 6.2

Tell us the version of Spartacus

• Library version: 6.2.0

To Reproduce Steps to reproduce the behavior:

1. Create a component to inject with OutletPosition
2. Inject this component BEFORE or AFTER another component
3. Go to the page where these components are
4. The component is duplicated

Expected behavior This component shouldn't be duplicated

Screenshots

Desktop (please complete the following information):

• OS: Windows
• Browser: Google Chrome

Additional context The project was initially on spartacus 4.3 and has been migrated to 6.2.

[aravello-cassinelli]

Me pasa lo mismo siempre que uso el método provideOutlet(). Por ejemplo: provideOutlet({ id: CartOutlets.ORDER_SUMMARY, component: OrderSummaryComponent, }),

[muhammedmisir]

Is there any investigation on this issue or a workaround?

[sebospc]

I had the same issue during the upgrade to the 5 version. Here's what I found:

Issue: Component duplication may occur if the outlet configuration module is imported multiple times (either indirectly or directly) within the SpartacusFeaturesModule.

   // Module A 
   @NgModule({
     imports: [...],
     providers: [
      provideOutlet({
        id: customOutlets.TEST,
        component: TestComponent,
      }),
     ]
   })
   export class ModuleA { }
   
   // Module B
   @NgModule({
     imports: [ModuleA],
   })
   export class ModuleB { }
   
   // Module C
   @NgModule({
     imports: [ModuleA],
   })
   export class ModuleC { }


   // Spartacus feature module
   @NgModule({
     imports: [
      ModuleB, // This line will create the first TestComponent
      ModuleC, // This will create the second TestComponent
     ],
   })
   export class SpartacusFeaturesModule { }

Solutions:

1. Restructure Modules: Organize your modules to prevent importing the outlet configuration module multiple times inside the SpartacusFeaturesModule.

2. Create a Dedicated Module: Designate a specific module to provide outlet configurations. Example:

// Module A 
@NgModule({
  imports: [...], // provideOutlet config was removed from this module
  declarations: [...],
  exports: [TestComponent],
})
export class ModuleA { }

// Module B
@NgModule({
  imports: [ModuleA],
})
export class ModuleB { }

// Module C
@NgModule({
  imports: [ModuleA],
})
export class ModuleC { }

// OutletConfigModule (Provide outlet configurations here)
@NgModule({
  imports: [ModuleA],
  providers: [
    provideOutlet({
      id: customOutlets.TEST,
      component: TestComponent,
    }),
  ]
})
export class OutletConfigModule { }

// Spartacus feature module
@NgModule({
  imports: [
    ModuleB, 
    ModuleC,
    OutletConfigModule // This line will create the TestComponent
  ],
})
export class SpartacusFeaturesModule { }

[kpawelczak]

@sebospc do any of these modules use OutletModule.forChild(), and also are they lazy loaded?

[sebospc]

@kpawelczak No, the modules in the example are eager modules but they could be lazy modules

[Zwezh]

@sebospc Hi! Such, your solution doesn't work for us, I didn't find any OutletModule imports as well as OutletService providers in our project. We provide only one outlet and it's placed twice on a page.

[sebospc]

@sebospc Hi! Such, your solution doesn't work for us, I didn't find any OutletModule imports as well as OutletService providers in our project. We provide only one outlet and it's placed twice on a page.

Ensure that OutletModule.forChild() is not being called twice, which can lead to component duplication.

[Zwezh]

@sebospc We got the project from previous suppliers and there is a lot of mess now, they have just hidden duplicated parts using 'display: none' instead of looking for a problem. Yesterday it was solved partially in a way by removing duplicated imported modules.

[felix-ka]

@sebospc Whenever I want to configure a custom Component to replace the standard one for the Outlet id: CartOutlets.ORDER_SUMMARY I get the duplicates in e.g. Order History Page, Checkout and Order Confirmation Page.

I believe this is as you said because OutletModule.forChild() is called in CartBaseComponentsModule which imports the original outlet config from CartSharedModule. In this case the cause lies in the standard code, causing the duplication and making it impossible for me to change it without actually replacing all of the components referencing the mentioned CartOutlets.ORDER_SUMMARY. SAP should change this in my eyes.