Bug: Tailwind-elements carousel component transitions break in Angular prerender

[GBeuneker]

First of all, what a great library to use! It has a lot of useful components I can easily add to my existing tailwind projects!

I have a very specific problem. For our website https://wikkl.me/en/ we used angular(v16) as a front-end framework and added the tailwind carousels on the homepage to showcase different images of our projects. The carousels work as expected when you simply use ng serve to serve the website.

But when we use the prerender to build and serve the website, the carousels start behaving strangely. The transitions between images break, sometimes it just instantly switches to the next image and sometimes the images slide in front of each other.

I also tried this with a clean project using the exact code snippets found on your website: https://tailwind-elements.com/docs/standard/components/carousel/

Even with a clean angular v16 project, when building the website with prerender and serving it the carousels break. Is there anything we can do about this currently?

We are using:
Angular 16.1.0
Tailwind-Elements 1.0.0-beta3

[juujisai]

Hi. Apparently prerender is causing some issues with transitions inside our Carousel component.

Sometimes in similar issues, dynamic imports solved the occuring problems. Maybe using dynamic imports inside ngOnInit could help? Try adding:

  ngOnInit() {
    const init = async () => {
      const { Carousel, initTE } = await import('tw-elements');
      initTE({ Carousel });
    };
    init();
  }

[GBeuneker]

Thank you for the quick reply! I just tried your solution, but unfortunately it made no difference. Do you have any other ideas I could try?

[juujisai]

Maybe there is a way in Angular prerender to skip the render of the component during prerendering, so that it would load as usual? I am thinking about something similar to no-ssr in nuxt or next.

I've read about isPlatformServer method, that could be used inside the shouldRenderComponent method. Maybe give it a try?

I hope any of this will be helpful.

[GBeuneker]

Thanks a lot for the help!
I tried your method of only rendering the component in the client side using *ngIf statements and a boolean inside an isPlatformBrowser check to only show the component in browser. Unfortunately, this still didn't seem to work.

It's not the biggest issue so I'll leave it at that for now. But I'm at least glad that it's on your radar :)