在Plnkr中创建Component类型SAP UI Integration Card失败求助

核心错误原因 #

你遇到的Card content failed to create component错误，主要是以下几个配置缺失或错误导致：

• 未配置资源根目录映射：UI5无法找到自定义组件的文件路径，必须通过resourceRoots将组件命名空间映射到实际文件所在目录。
• 组件未实现卡片要求的接口：Component类型的UI Integration Card必须实现sap.ui.integration.IComponentCard接口，否则卡片无法识别该组件。
• 卡片配置与组件命名空间不匹配：卡片配置里的组件名称必须和Component.js里定义的命名空间完全一致。

具体修复步骤 #

1. 配置资源根目录 #

在index.html的SAP UI5 bootstrap脚本中，添加data-sap-ui-resourceroots参数，将你的组件命名空间映射到当前目录（假设组件文件在根目录）：

<script id="sap-ui-bootstrap"
        src="https://ui5.sap.com/resources/sap-ui-core.js"
        data-sap-ui-libs="sap.ui.integration,sap.m"
        data-sap-ui-resourceroots='{"my.custom.card": "./"}'
        data-sap-ui-theme="sap_belize"
        data-sap-ui-compatVersion="edge"
        data-sap-ui-async="true">
</script>

注意：my.custom.card需要和你Component.js中定义的命名空间完全一致。

2. 修正Component.js实现 #

确保组件继承自sap.ui.core.UIComponent，并实现sap.ui.integration.IComponentCard接口，同时提供基础的内容创建逻辑：

sap.ui.define([
  "sap/ui/core/UIComponent",
  "sap/m/Text"
], function(UIComponent, Text) {
  "use strict";

  return UIComponent.extend("my.custom.card.Component", {
    metadata: {
      interfaces: ["sap.ui.integration.IComponentCard"]
    },

    createContent: function() {
      return new Text({ text: "Component Card Loaded Successfully" });
    }
  });
});

3. 调整卡片配置文件 #

在卡片的JSON配置（如card.json）中，确保component.name指向正确的组件命名空间：

{
  "type": "Component",
  "header": {
    "title": "Minimal Component Card"
  },
  "sap.ui5": {
    "component": {
      "name": "my.custom.card"
    }
  }
}

验证要点 #

• 确认所有文件路径和命名空间完全匹配，大小写敏感。
• 确保UI5库依赖sap.ui.integration已正确加载（bootstrap的data-sap-ui-libs参数包含该库）。

内容的提问来源于stack exchange，提问作者Pieter