文件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 On-Premise軟體
  • AEM Managed Services

問題/症狀

  • 協力廠商Angular、React或Widget元件會呈現時沒有樣式或功能。
  • JavaScript或CSS資源無法載入。
  • 體驗片段HTML選擇器請求傳回​ 404 ​個錯誤。
  • 作者無法在AEM頁面中放置或編輯協力廠商元件。
  • 內嵌的社群媒體內容未出現。
  • 受支援的Angular或React整合模型存在不確定性。
  • 遠端SPA無法正確載入或整合。

原因

AEM支援多種整合模式，每種模式都有特定的需求和限制。 使用不支援的內嵌方法、整合模型混合不正確、體驗片段重寫設定錯誤，或遠端應用程式未根據支援的模式託管和設定時，會發生問題。

解決方法 resolution

若要解決此問題，請遵循下列步驟：

  1. 針對特定使用案例選取支援的整合模式，例如SPA Editor、Hybrid HTL和React、內嵌元件、微前端框架、遠端SPA或體驗片段整合。
  2. 針對AEM 6.5上的Angular實作，請確認已安裝並設定必要的SPA Editor Feature Pack。
  3. 對於HTL頁面中的React元件，請透過支援的使用者端程式庫、Web元件包裝函式或容器元素載入元件。
  4. 對於SPA Editor實作，請驗證元件對應和模型整合。
  5. 對支援的社群媒體內容使用內嵌或HTML元件。
  6. 透過iframe、Web元件、遠端指令碼載入或模組同盟等支援的方法實作微前端。
  7. 使用支援的部署方法來託管遠端SPA，並確認可存取應用程式資產。
  8. 在外部應用程式中重複使用內容時，使用體驗片段HTML選擇器並驗證重寫行為。
  9. 若要內嵌PDF檢視，請透過使用者端資料庫實作檢視器，並確保來源PDF檔案仍可存取。
  10. 驗證在製作和發佈環境中轉譯、製作功能以及資產載入情形。

相關閱讀

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