angular / angular/components

bug(cdk-virtual-scroll-viewport): Content not present in SSR load

Ouverte
#24,956 7 commentaires 5 réactions 0 personnes assignées Voir sur GitHub
area: cdk/scrolling P3
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

_No response_

### Description

When rendering a page in SSR mode, the content for the virtual scroll is not rendered. It's blank. The page works fine when rendered in the browser. Screenshot attached for the SSR load response
Screenshot 2022-05-23 at 4 31 22 PM
:

### Reproduction

Steps to reproduce:
1. Clone the repo https://github.com/bivs06/angular-universal-ssr-bug
2. Run `npm run dev:ssr`
3. Check the response in the network tab

StackBlitz link: https://stackblitz.com/edit/angular-ivy-kfyv87?file=src%2Fapp%2Fapp.component.html

### Expected Behavior

The items for virtual scroll should load in SSR load

### Actual Behavior

The items for the virtual scroll are not loading in the SSR load

### Environment

- Angular:
- CDK/scrolling:
- Browser(s):
- Operating System (e.g. Windows, macOS, Ubuntu):

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Clonez le dépôt angular-universal-ssr-bug lié et exécutez `npm run dev:ssr` ; comparez la réponse réseau avec la page rendue par le navigateur. Commencez par la reproduction dans `src/app/app.component.html` du lien StackBlitz et par le comportement de `cdk-virtual-scroll-viewport`. C’est terminé lorsque les éléments de virtual-scroll apparaissent à la fois dans la réponse SSR et dans le navigateur.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
frontend
Type d'issue
Bug
Difficulté
4/5
Temps estimé
3-5 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
30/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.