gabrielbusarello / material2-carousel

A carousel component for Angular using Material
https://gabrielbusarello.github.io/material2-carousel
MIT License
35 stars 31 forks source link

It doesn't work with SSR #10

Open monti-cistella opened 3 years ago

monti-cistella commented 3 years ago

If you import this module and compile with Angular Universal Server Side Rendering, then the project does not work, the website does not charge in the browser.

monti-cistella commented 3 years ago

SOLVED!

The problem comes from the startTimer function of the carousel.component.ts. The timer blocks the Server App. It seems that the filter(() => this.isVisible() in the pipe is not enough. I just added a condition if isPlatformBrowser before this times and now it works perfectly:

if (isPlatformBrowser(this.platformId)) { this.timer$ .pipe( takeUntil(this.timerStop$), takeUntil(this.destroy$), filter(() => this.isVisible()) ) .subscribe(() => { this.listKeyManager.withWrap(true).setNextItemActive(); this.listKeyManager.withWrap(this.loop); }); }

If you have the same problem, just apply this solution. In my case I'm using Angular 10.2.3 and Universal 10.1.

sagrawal31 commented 3 years ago

We are also having the same problem