Los componentes de terceros o SPA no se representan correctamente en AEM
La integración de Angular, React, microinterfaces, incrustaciones externas y SPA independientes en páginas de AEM requiere el modelo y la configuración de integración correctos. Una implementación incorrecta suele provocar problemas de procesamiento, falta de estilos, limitaciones de creación, problemas de validación, incoherencias en la carga útil y errores de reescritura de Dispatcher. Este artículo describe los patrones de integración admitidos y los pasos necesarios para evitar estos problemas.
Descripción description
Entorno
- Adobe Experience Manager as a Cloud Service (AEMaaCS)
- Software local de Adobe Experience Manager
- AEM Managed Services
Problema/Síntomas
- Los componentes de Angular, React o Widget de terceros se representan sin estilo ni funcionalidad.
- Los recursos de JavaScript o CSS no se pueden cargar.
- Las solicitudes del selector de HTML del Fragmento de experiencia devuelven 404 errores.
- Los autores no pueden colocar ni editar componentes de terceros en páginas de AEM.
- El contenido de medios sociales incrustado no aparece.
- Existe incertidumbre sobre los modelos de integración Angular o React admitidos.
- Las SPA remotas no se cargan o integran correctamente.
Causa
AEM admite varios modelos de integración, cada uno con requisitos y limitaciones específicos. Se producen problemas cuando se utilizan métodos de incrustación no admitidos, los modelos de integración se mezclan incorrectamente, las reescrituras de fragmentos de experiencia están mal configuradas o las aplicaciones remotas no están alojadas y configuradas según los patrones admitidos.
Resolución resolution
Para resolver este problema, siga estos pasos:
- Seleccione un patrón de integración admitido para el caso de uso específico, como Editor de SPA, HTL híbrido y React, Componente incrustado, marco de trabajo de micro front-end, SPA remoto o integración de fragmento de experiencia.
- Para implementaciones de Angular en AEM 6.5, compruebe que los paquetes de funciones del Editor de SPA necesarios estén instalados y configurados.
- Para los componentes de React en páginas HTL, cargue el componente a través de una biblioteca de cliente, un contenedor de componente web o un elemento contenedor admitidos.
- Para implementaciones del Editor SPA, compruebe las asignaciones de componentes y la integración del modelo.
- Utilice el componente Incrustar o HTML para el contenido de medios sociales admitido.
- Implemente microfrontend a través de enfoques compatibles como iframes, componentes web, carga de scripts remotos o federación de módulos.
- Aloje SPA remotos utilizando métodos de implementación admitidos y compruebe que los recursos de la aplicación son accesibles.
- Utilice los selectores de HTML del Fragmento de experiencia cuando reutilice contenido en aplicaciones externas y verifique el comportamiento de reescritura.
- Para la visualización de PDF incrustada, implemente el visor a través de una biblioteca de cliente y asegúrese de que los archivos de PDF de origen permanezcan accesibles.
- Valide el procesamiento, la funcionalidad de creación y la carga de recursos en los entornos de creación y publicación.