TypeError：无法读取未定义的属性“<part of class name>”答案

【问题标题】：TypeError: Cannot read property '<part of class name>' of undefinedTypeError：无法读取未定义的属性“<part of class name>”
【发布时间】：2020-08-10 11:19:59
【问题描述】：

我尝试在 SAPUI5 中添加InfoLabel

new sap.tnt.InfoLabel({/*...*/);

但是这个错误在重复：

TypeError：无法读取未定义的属性“InfoLabel”

【问题讨论】：

以下答案有帮助吗？如果有不清楚或遗漏的地方，请随时在此处发表评论。否则请考虑接受答案，让其他人知道问题已解决。见What should I do when someone answers my question?

标签： sapui5 amd

【解决方案1】：

确保在manifest.json 内的/sap.ui5/dependencies/libs 中声明目标模块所属的所有依赖库。以sap.tnt.InfoLabel 为例：
```
"sap.ui5": {
  "dependencies": {
    "libs": {
      "sap.ui.core": {},
      "sap.m": {},
      "sap.tnt": {}
    }
  },
```
^{注意：manifest.json 也称为 Descriptor for Applications, Components, and Libraries 或简称为应用描述符。}

如果没有manifest.json，将依赖库添加到index.html中的data-sap-ui-libs：
```
&lt;script id="sap-ui-bootstrap" src="..." <strong>data-sap-ui-libs="sap.ui.core,sap.m,sap.tnt"</strong>&gt;
```

只有在预加载其依赖库后才能访问模块。这可以通过使用各种 API 来确保，具体取决于用例：

以声明方式使用sap/ui/core/ComponentSupport.js （推荐）：

<script id="sap-ui-bootstrap" src="..."
  data-sap-ui-async="true"
  data-sap-ui-resourceroots='{"my.demo": "./"}'
  data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
  ...
></script>
<body class="sapUiBody" id="content">
  <div style="height: 100%;"
    data-sap-ui-component
    data-id="rootComponentContainer"
    data-name="my.demo"
    data-height="100%"
    data-settings='{ "id": "rootComponent" }'
  ></div>
</body>

^{文档：Declarative API for Initial Components，示例：https://embed.plnkr.co/16J1TFICxbqETCzaxuZ0}

使用内联脚本（仅在没有manifest.json 的情况下；仅适用于小型演示）：

<script id="sap-ui-bootstrap" src="..."
  data-sap-ui-libs="sap.ui.core, sap.m, sap.tnt"
  data-sap-ui-async="true"
  ...
></script>
&ltscript>
  sap.ui.getCore().attachInit(function() {
    // your code...
  });
</script>
<body class="sapUiBody" id="content"></body>

此外，避免通过全局名称引用控件（例如sap.tnt.…）！相反，需要相应的模块：

sap.ui.define([ // Dependency list; requiring the modules:
  "sap/ui/core/mvc/Controller",
  "sap/tnt/InfoLabel",
], function(Controller, InfoLabel) {
  "use strict";

  return Controller.extend("myController", {
    someMethod: function(/*...*/) {
      const myInfoLabel = new InfoLabel({/*...*/}); // without a global name
      // ...
    },
  });
    
});

来自doc：

[...] 您的应用程序模块必须促进 UI5 中与 异步模块定义 (AMD) 标准一致的模块定义和处理概念.

[...] 所有必要的模块依赖项 [...] 需要由sap.ui.require 或sap.ui.define 处理。

另见主题Modules and Dependencies。

始终检查目标模块在 UI5 版本中是否可用也很重要。例如，sap.tnt.InfoLabel 是在 1.54 中引入的。如果您尝试 require 一个尚不存在的模块，您可能会收到 404 错误。

要查看您的应用运行的 UI5 版本，请按 Ctrl+Shift+Left Alt+P.

【讨论】：