Les composants tiers ou SPA ne s’affichent pas correctement dans AEM
L’intégration d’Angular, de React, des micro fronts, des incorporations externes et des SPA autonomes dans des pages AEM nécessite le modèle d’intégration et la configuration appropriés. Une implémentation incorrecte entraîne souvent des problèmes de rendu, des styles manquants, des limitations de création, des problèmes de validation, des incohérences de payload et des erreurs de réécriture du Dispatcher. Cet article décrit les modèles d’intégration pris en charge et les étapes nécessaires pour éviter ces problèmes.
Description description
Environnement
- Adobe Experience Manager as a Cloud Service (AEMaaCS)
- Logiciel On-Premise Adobe Experience Manager
- AEM Managed Services
Problème/Symptômes
- Les composants Angular, React ou de widget tiers s’affichent sans style ni fonctionnalité.
- Échec du chargement des ressources JavaScript ou CSS.
- Les requêtes du sélecteur d’HTML des fragments d’expérience renvoient des erreurs 404.
- Les auteurs ne peuvent pas placer ni modifier des composants tiers dans les pages AEM.
- Le contenu intégré aux médias sociaux n’apparaît pas.
- Il existe une incertitude quant aux modèles d’intégration Angular ou React pris en charge.
- Le chargement ou l’intégration des SPA distantes échouent.
Cause
AEM prend en charge plusieurs modèles d’intégration, chacun ayant des exigences et des limitations spécifiques. Des problèmes surviennent lorsque des méthodes d’incorporation non prises en charge sont utilisées, que les modèles d’intégration sont mal mélangés, que les réécritures de fragments d’expérience sont mal configurées ou que les applications distantes ne sont pas hébergées et configurées selon des modèles pris en charge.
Résolution resolution
Pour résoudre ce problème, procédez comme suit :
- Sélectionnez un modèle d’intégration pris en charge pour le cas d’utilisation spécifique, tel que l’éditeur de SPA, le HTL hybride et React, le composant Incorporer, la structure micro front-end, la SPA distante ou l’intégration d’un fragment d’expérience.
- Pour les implémentations d’Angular sur AEM 6.5, vérifiez que les Feature Packs de l’éditeur de SPA requis sont installés et configurés.
- Pour les composants React dans les pages HTL, chargez le composant via une bibliothèque cliente prise en charge, un wrapper de composant web ou un élément de conteneur.
- Pour les implémentations de l’éditeur de SPA, vérifiez les mappages de composants et l’intégration de modèles.
- Utilisez le composant Incorporer ou HTML pour le contenu de médias sociaux pris en charge.
- Implémentez des micro fronts par le biais d’approches prises en charge telles que les iframes, les composants web, le chargement de script distant ou la fédération de modules.
- Hébergez des SPA distantes à l’aide des méthodes de déploiement prises en charge et vérifiez que les ressources d’application sont accessibles.
- Utilisez les sélecteurs HTML de fragments d’expérience lors de la réutilisation de contenu dans des applications externes et vérifiez le comportement de réécriture.
- Pour l’affichage PDF incorporé, implémentez la visionneuse par le biais d’une bibliothèque cliente et assurez-vous que les fichiers PDF sources restent accessibles.
- Validez le rendu, la fonctionnalité de création et le chargement des ressources dans les environnements de création et de publication.