Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Carousel SSR broken #8447

Closed
rafa-suagu opened this issue Jan 13, 2020 · 2 comments · Fixed by #11625
Closed

Carousel SSR broken #8447

rafa-suagu opened this issue Jan 13, 2020 · 2 comments · Fixed by #11625
Labels
Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add
Milestone

Comments

@rafa-suagu
Copy link

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
I can't do the Plunkr because is a SSR related issue.

Current behavior
SSR build are broken because the carousel access to window and document objects.

document
carouse.ts: 288 and 290

window
carouse.ts: 337, 605 and 611

Expected behavior
SSR works properly

Minimal reproduction of the problem with instructions
Add carousel with responsiveOptions to app and build for SSR.

What is the motivation / use case for changing the behavior?
Make SSR builds works.

  • Angular version: 8.2.9

  • PrimeNG version: 8.1.1

  • Browser: all

  • Language: all

@cagataycivici cagataycivici added the Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add label Apr 3, 2020
@cagataycivici cagataycivici added this to the 9.0.7 milestone Apr 3, 2020
@cagataycivici cagataycivici modified the milestones: 9.0.7, 9.FUTURE Apr 20, 2020
@rafa-suagu
Copy link
Author

@cagataycivici some news here?

@nitedani
Copy link
Contributor

The carousel works for me, I'm using domino to define the window object on the server. There is another issue with the carousel though. On the server render, the following style is missing:

        .p-carousel-item {
          flex: 1 0 100%;
        }

It causes the carousel content to jump around once the javascript has downloaded and the style is applied.
Adding these lines to the scss fixes the issue for me.

@cetincakiroglu cetincakiroglu added this to the 14.0.3 milestone Sep 9, 2022
cetincakiroglu added a commit that referenced this issue Sep 9, 2022
Fix #8447: Make carousel universal compatible
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants