文档Experience Cloud KCS

第三方或SPA组件无法在AEM中正确呈现

最近更新： 2026年7月16日

将Angular、React、micro frontend、外部嵌入和独立SPA集成到AEM页面中，需要正确的集成模型和配置。 不正确的实施通常会导致呈现问题、缺少样式、创作限制、验证问题、有效负载不一致和Dispatcher重写错误。 本文概述了受支持的集成模式以及避免这些问题所需的步骤。

描述 description

环境

  • Adobe Experience Manager as a Cloud Service (AEMaaCS)
  • Adobe Experience Manager内部部署软件
  • AEM Managed Services

问题/症状

  • 第三方Angular、React或小组件呈现时没有样式或功能。
  • JavaScript或CSS资源加载失败。
  • 体验片段HTML选择器请求返回​ 404 ​错误。
  • 作者无法在AEM页面中放置或编辑第三方组件。
  • 嵌入的社交媒体内容未显示。
  • 受支持的Angular或React集成模型存在不确定性。
  • 远程SPA无法正确加载或集成。

原因

AEM支持多种集成模型，每种模型都有特定的要求和限制。 在使用不受支持的嵌入方法、集成模型混合不正确、体验片段重写配置错误或未根据支持的模式托管和配置远程应用程序时，会发生问题。

解决方法 resolution

要解决此问题，请执行以下步骤：

  1. 为特定用例选择支持的集成模式，如SPA编辑器、混合HTL和React、嵌入组件、微前端框架、远程SPA或体验片段集成。
  2. 对于AEM 6.5上的Angular实施，请验证是否已安装和配置所需的SPA Editor功能包。
  3. 对于HTL页面中的React组件，请通过受支持的客户端库、Web组件包装器或容器元素加载该组件。
  4. 对于SPA编辑器实施，请验证组件映射和模型集成。
  5. 对支持的社交媒体内容使用嵌入或HTML组件。
  6. 通过受支持的方法（如iframe、Web组件、远程脚本加载或模块联合）实施微前端。
  7. 使用受支持的部署方法托管远程SPA，并验证应用程序资产是否可以访问。
  8. 在外部应用程序中重用内容时使用体验片段HTML选择器并验证重写行为。
  9. 对于嵌入的PDF查看，请通过客户端库实施查看器，并确保源PDF文件保持可访问状态。
  10. 验证创作和发布环境中的渲染、创作功能以及资产加载。

相关阅读

recommendation-more-help
experience-cloud-kcs-help-kbarticles