Il peut être difficile de déboguer les erreurs de désaccord d’hydratation du DOM lorsque vous avez des données différentes entre le client et le serveur ou effectuez des manipulations manuelles du DOM.
Une contribution de la communauté par Matthieu Riegler a introduit le support de débogage de l’hydratation dans Angular DevTools qui peut vous aider à résoudre ce problème plus facilement.
Sur l’image ci-dessus, nous pouvons voir comment Angular DevTools montre le désaccord entre le DOM provenant du navigateur et le HTML produit par le serveur.
Angular DevTools se mettra à jour automatiquement dans les prochains jours.
Chargeur d'images pour Netlify
La directive NgOptimizedImage permet des fonctionnalités de performance puissantes pour vos images, y compris la mise en place du srcset automatique. Nous pouvons également spécifier un chargeur d’images.
À partir de la version 17.2, nous pouvons maintenant utiliser provideNetlifyLoader pour utiliser cette optimisation avec Netlify ! Pour en savoir plus sur cette nouveauté vous pouvez vous rendre dans la documentation sur https://angular.io/guide/image-directive.
Placeholder automatique avec NgOptimizedImage
Si vous utilisez la directive NgOptimizedImage pour vos images, vous pouvez maintenant rapidement ajouter un placeholder flou pendant le chargement d’une image. Il suffit d’ajouter l’attribut placeholder à votre image, et la directive d’image demandera automatiquement une petite version de l’image, la floutera et l’affichera jusqu’à ce que l’image complète soit prête.
Voici une image pour montrer le rendu de ce nouvel ajout.
