nz-carousel not working in angular ssr project

[gdayal80]

Reproduction link

(https://stackblitz.com/github/gdayal80/angular-ssr-nz-carousel?file=README.md)

Steps to reproduce

the project link given in *Link to minimal reproduction
the carousel shows only first slide on load, other slides are shown blank

What is expected?

the carousel should show the other slides similar to first slide

What is actually happening?

the carousel works in angular project without ssr, but does not work in angular project with ssr

Environment	Info
ng-zorro-antd	17.4.1
Browser	chrome Version 133.0.6943.126 (Official Build) (64-bit)

[yongshun950824]

Currently, the carousel component doesn't support/check for SSR.

Refer to this commit, the Carousel component should be initialized and rendered only when it is running in the browser and after the hydration is completed.

For the temporary solution, I write the StackOverflow answer:

@if (isBrowser) {
  <nz-carousel nzAutoPlay>
    @for (index of array; track index) {
    <div nz-carousel-content>
      <h3>{{ index }}</h3>
    </div>
    }
  </nz-carousel>
}

import { AfterViewInit, Inject, PLATFORM_ID, ViewChild } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

@ViewChild(NzCarouselComponent) carousel!: NzCarouselComponent;
isBrowser = false;

constructor(@Inject(PLATFORM_ID) private platformId: any) {
  this.isBrowser = isPlatformBrowser(this.platformId);
}

ngAfterViewInit() {
  if (this.isBrowser && this.carousel) {
    setTimeout(() => {
      this.carousel.layout();
    }, 0);
  }
}

Demo @ StackBlitz

Hope this helps to give the insight on fixing this bug.

Thank you.