Stepper is creating 2 of everything

[quinnjr]

Hello,

I'm currently working on integrating the StepperModule into my app and I'm having difficulty getting it to render correctly.

Currently, on page initialization of my component, the Stepper components create 2 copies of themselves while awaiting resolution of the page from the SSR hydration. This causes the content on my page to double-out and look...strange. I've verified that the issue is due to SSR issues by adding ngSkipHydration to the component.

Currently, I'm importing the module as

imports: [
    CommonModule,
    ReactiveFormsModule,
    TableComponent,
    StepperModule,
    ButtonModule,
    StepsModule
  ],

The components are put into the view as

  <p-stepper [(value)]="activeTab" class="basis-[40rem]">

activeTab is just a public number variable on the component class.

The component doesn't have any direct DOM manipulations; everything is going through Angular's libraries.

Is there something I'm missing here.