Third-party or SPA components do not render correctly in AEM
Integrating Angular, React, micro frontends, external embeds, and standalone SPAs into AEM pages requires the correct integration model and configuration. Incorrect implementation often leads to rendering issues, missing styles, authoring limitations, validation problems, payload inconsistencies, and dispatcher rewrite errors. This article outlines supported integration patterns and the steps required to avoid these issues.
Description description
Environment
- Adobe Experience Manager as a Cloud Service (AEMaaCS)
- Adobe Experience Manager On-Premise Software
- AEM Managed Services
Issue/Symptoms
- Third-party Angular, React, or widget components render without styling or functionality.
- JavaScript or CSS resources fail to load.
- Experience Fragment HTML selector requests return 404 errors.
- Authors cannot place or edit third-party components within AEM pages.
- Embedded social media content does not appear.
- Uncertainty exists about supported Angular or React integration models.
- Remote SPAs fail to load or integrate correctly.
Cause
AEM supports multiple integration models, each with specific requirements and limitations. Issues occur when unsupported embedding methods are used, integration models are mixed incorrectly, Experience Fragment rewrites are misconfigured, or remote applications are not hosted and configured according to supported patterns.
Resolution resolution
To resolve this issue, follow these steps:
- Select a supported integration pattern for the specific use case, such as SPA Editor, Hybrid HTL and React, Embed component, micro frontend framework, remote SPA, or Experience Fragment integration.
- For Angular implementations on AEM 6.5, verify that the required SPA Editor feature packs are installed and configured.
- For React components in HTL pages, load the component through a supported client library, web component wrapper, or container element.
- For SPA Editor implementations, verify component mappings and model integration.
- Use the Embed or HTML component for supported social media content.
- Implement micro frontends through supported approaches such as iframes, web components, remote script loading, or module federation.
- Host remote SPAs using supported deployment methods and verify that application assets are accessible.
- Use Experience Fragment HTML selectors when reusing content in external applications and verify rewrite behavior.
- For embedded PDF viewing, implement the viewer through a client library and ensure source PDF files remain accessible.
- Validate rendering, authoring functionality, and asset loading in both author and publish environments.