Componentes de terceiros ou SPA não são renderizados corretamente no AEM
Integrar o Angular, o React, os microfront-ends, incorporações externas e SPAs independentes em páginas do AEM requer o modelo de integração e a configuração corretos. A implementação incorreta geralmente leva a problemas de renderização, ausência de estilos, limitações de criação, problemas de validação, inconsistências de carga e erros de regravação do dispatcher. Este artigo descreve os padrões de integração compatíveis e as etapas necessárias para evitar esses problemas.
Descrição description
Ambiente
- Adobe Experience Manager as a Cloud Service (AEMaaCS)
- Software Adobe Experience Manager no local
- AEM Managed Services
Problema/Sintomas
- Componentes de terceiros do Angular, React ou widget são renderizados sem estilo ou funcionalidade.
- Falha ao carregar recursos JavaScript ou CSS.
- As solicitações do seletor HTML do Fragmento de experiência retornam erros 404.
- Os autores não podem colocar ou editar componentes de terceiros em páginas do AEM.
- O conteúdo de redes sociais inserido não é exibido.
- Há incerteza sobre os modelos de integração compatíveis do Angular ou do React.
- Os SPAs remotos não são carregados ou integrados corretamente.
Causa
O AEM oferece suporte a vários modelos de integração, cada um com requisitos e limitações específicos. Problemas ocorrem quando métodos de incorporação não compatíveis são usados, os modelos de integração são misturados incorretamente, as substituições de Fragmento de experiência são configuradas incorretamente ou os aplicativos remotos não são hospedados e configurados de acordo com os padrões compatíveis.
Resolução resolution
Para resolver esse problema, siga estas etapas:
- Selecione um padrão de integração compatível para o caso de uso específico, como Editor de SPA, HTL híbrido e React, componente de Incorporação, estrutura de micro front-end, SPA remoto ou integração de Fragmento de experiência.
- Para implementações do Angular no AEM 6.5, verifique se os pacotes de recursos necessários do Editor de SPA estão instalados e configurados.
- Para componentes React em páginas HTL, carregue o componente por meio de uma biblioteca de cliente, wrapper de componentes web ou elemento de contêiner compatível.
- Para implementações do Editor de SPA, verifique os mapeamentos de componentes e a integração de modelos.
- Use o componente de Incorporação ou HTML para conteúdo de redes sociais compatível.
- Implemente micro front-ends por meio de abordagens compatíveis, como iframes, componentes da Web, carregamento remoto de scripts ou federação de módulos.
- Hospede SPAs remotos usando métodos de implantação compatíveis e verifique se os ativos do aplicativo estão acessíveis.
- Use seletores de HTML de fragmento de experiência ao reutilizar conteúdo em aplicativos externos e verifique o comportamento de regravação.
- Para a visualização incorporada do PDF, implemente o visualizador por meio de uma biblioteca do cliente e garanta que os arquivos PDF de origem permaneçam acessíveis.
- Valide a renderização, a funcionalidade de criação e o carregamento de ativos nos ambientes do autor e de publicação.