Carousel does not work on Angular Universal with preboot dependecy

[pilomat]

Hello,

I'm using carousel in Angular Universal projects with preboot dependency.

In CSR the carousel work perfectlly, but not on SSR. Images appear and disappear immediately.

[vitalii-andriiovskyi]

@pilomat

Please, share example to reproduce your issue.

[TzuJu]

I'm facing the same problem, and i found in ssr the app-root has a display: none style, so clientWidth in ngOnInit will be 0px.

To fix this, add a *ngIf on component wait until preboot done.

<owl-carousel-o [options]="owlOptions" *ngIf="(isBrowser && waitForPreBoot && isPrebootCompleted) || (isBrowser && !waitForPreBoot)">

  onPrebootComplete = () => {
    // put your code here that you want to run once preboot is complete
    this.isPrebootCompleted = true;
  }

  ngOnInit() {
    if (this.isBrowser && this.isSSRMode) {
      this.waitForPreBoot = true;
      window.document.addEventListener('PrebootComplete', this.onPrebootComplete);
    }
    ...
  }
  ngOnDestroy(): void {
    if (this.isBrowser && this.isSSRMode) {
      window.document.removeEventListener('PrebootComplete', this.onPrebootComplete);
    }
    ...
  }

Hope this will save someone's day :)