I componenti di terze parti o SPA non vengono riprodotti correttamente in AEM
L’integrazione di Angular, React, micro front-end, incorporamenti esterni e applicazioni a pagina singola autonome nelle pagine di AEM richiede il modello di integrazione e la configurazione corretti. Un’implementazione errata spesso causa problemi di rendering, stili mancanti, limitazioni di authoring, problemi di convalida, incoerenze nel payload ed errori di riscrittura del dispatcher. Questo articolo illustra i modelli di integrazione supportati e i passaggi necessari per evitare questi problemi.
Descrizione description
Ambiente
- Adobe Experience Manager as a Cloud Service (AEMaaCS)
- Software Adobe Experience Manager On-Premise
- AEM Managed Services
Problema/Sintomi
- I componenti Angular, React o widget di terze parti eseguono il rendering senza stile o funzionalità.
- Impossibile caricare le risorse JavaScript o CSS.
- Le richieste del selettore HTML di Frammenti esperienza restituiscono 404 errori.
- Gli autori non possono inserire o modificare componenti di terze parti all’interno delle pagine di AEM.
- Il contenuto incorporato dei social media non viene visualizzato.
- Esistono incertezze sui modelli di integrazione supportati da Angular o React.
- Impossibile caricare o integrare correttamente le applicazioni a pagina singola remote.
Causa
AEM supporta più modelli di integrazione, ciascuno con requisiti e limitazioni specifici. Si verificano problemi quando si utilizzano metodi di incorporamento non supportati, i modelli di integrazione non vengono combinati correttamente, le riscritture dei frammenti di esperienza non vengono configurate correttamente o le applicazioni remote non vengono ospitate e configurate in base ai modelli supportati.
Risoluzione resolution
Per risolvere il problema, eseguire la procedura seguente:
- Seleziona un modello di integrazione supportato per il caso d’uso specifico, ad esempio editor SPA, HTL ibrido e React, componente Incorpora, micro framework front-end, SPA remota o integrazione con frammenti di esperienza.
- Per le implementazioni di Angular in AEM 6.5, verifica che siano installati e configurati i pacchetti di funzioni dell’editor SPA richiesti.
- Per i componenti React nelle pagine HTL, carica il componente tramite una libreria client supportata, un wrapper di componenti web o un elemento contenitore.
- Per le implementazioni dell’editor SPA, verifica le mappature dei componenti e l’integrazione dei modelli.
- Utilizza il componente Incorpora o HTML per i contenuti di social media supportati.
- Implementa micro front-end tramite approcci supportati come iframe, componenti web, caricamento di script remoti o federazione di moduli.
- Ospita applicazioni a pagina singola remote utilizzando i metodi di distribuzione supportati e verifica che le risorse dell’applicazione siano accessibili.
- Utilizza i selettori HTML per frammenti di esperienza quando riutilizzi il contenuto in applicazioni esterne e verifica il comportamento di riscrittura.
- Per la visualizzazione PDF incorporata, implementa il visualizzatore tramite una libreria client e assicurati che i file PDF di origine rimangano accessibili.
- Convalida il rendering, la funzionalità di authoring e il caricamento delle risorse sia negli ambienti di authoring che di pubblicazione.