Komponenten von Drittanbietern oder SPAs werden in AEM nicht korrekt dargestellt
Die Integration von Angular, React, Micro-Frontends, externen Einbettungen und eigenständigen SPAs in AEM-Seiten erfordert das richtige Integrationsmodell und die richtige Konfiguration. Eine falsche Implementierung führt oft zu Rendering-Problemen, fehlenden Stilen, Authoring-Einschränkungen, Validierungsproblemen, Payload-Inkonsistenzen und Dispatcher-Neuschreibungsfehlern. In diesem Artikel werden unterstützte Integrationsmuster und die erforderlichen Schritte zur Vermeidung dieser Probleme beschrieben.
Beschreibung description
Umgebung
- Adobe Experience Manager as a Cloud Service (AEMaaCS)
- Adobe Experience Manager On-Premise-Software
- AEM Managed Services
Problem/Symptome
- Angular-, React- oder Widget-Komponenten von Drittanbietern werden ohne Stil oder Funktionalität gerendert.
- JavaScript- oder CSS-Ressourcen können nicht geladen werden.
- Experience Fragment HTML-Auswahlanfragen geben 404-Fehler zurück.
- Autorinnen und Autoren können keine Drittanbieterkomponenten innerhalb von AEM-Seiten platzieren oder bearbeiten.
- Eingebettete Social-Media-Inhalte werden nicht angezeigt.
- Es besteht Unsicherheit über unterstützte Angular- oder React-Integrationsmodelle.
- Remote-SPAs können nicht ordnungsgemäß geladen oder integriert werden.
Ursache
AEM unterstützt mehrere Integrationsmodelle mit jeweils spezifischen Anforderungen und Einschränkungen. Probleme treten auf, wenn nicht unterstützte Einbettungsmethoden verwendet werden, Integrationsmodelle falsch gemischt werden, Experience Fragment-Neuschreibungen falsch konfiguriert sind oder Remote-Anwendungen nicht gemäß unterstützten Mustern gehostet und konfiguriert werden.
Lösung resolution
Gehen Sie wie folgt vor, um dieses Problem zu beheben:
- Wählen Sie ein unterstütztes Integrationsmuster für den spezifischen Anwendungsfall aus, z. B. SPA-Editor, hybride HTL- und React-Integration, Einbettungskomponente, Micro-Frontend-Framework, Remote-SPA oder Experience Fragment-Integration.
- Stellen Sie bei Angular-Implementierungen auf AEM 6.5 sicher, dass die erforderlichen SPA Editor Feature Packs installiert und konfiguriert sind.
- Laden Sie für React-Komponenten auf HTL-Seiten die -Komponente über eine unterstützte Client-Bibliothek, einen Web-Komponenten-Wrapper oder ein Container-Element.
- Überprüfen Sie bei SPA-Editor-Implementierungen die Komponentenzuordnungen und die Modellintegration.
- Verwenden Sie die Einbettungs- oder HTML-Komponente für unterstützte Social-Media-Inhalte.
- Implementieren Sie Micro-Frontends über unterstützte Ansätze wie iFrames, Web-Komponenten, Remote-Laden von Skripten oder Modulverbund.
- Hosten Sie Remote-SPAs mit unterstützten Bereitstellungsmethoden und stellen Sie sicher, dass auf Anwendungs-Assets zugegriffen werden kann.
- Verwenden Sie HTML-Selektoren für Experience Fragments, wenn Sie Inhalte in externen Anwendungen wiederverwenden, und überprüfen Sie das Verhalten beim Neuschreiben.
- Implementieren Sie für die eingebettete PDF-Anzeige den Viewer über eine Client-Bibliothek und stellen Sie sicher, dass die PDF-Quelldateien verfügbar bleiben.
- Validieren der Rendering- und Authoring-Funktionalität sowie des Ladens von Assets in der Authoring- und Publishing-Umgebung.