Make sure to declare all dependent libraries, to which the target modules belong, in /sap.ui5/dependencies/libs within manifest.json. For sap.tnt.InfoLabel for example:
"sap.ui5": {
"dependencies": {
"libs": {
"sap.ui.core": {},
"sap.m": {},
"sap.tnt": {}
}
},
Note: manifest.json is also called Descriptor for Applications, Components, and Libraries or simply app descriptor.
If there is no manifest.json, add the dependent libraries to data-sap-ui-libs in index.html:
<script id="sap-ui-bootstrap" src="..." data-sap-ui-libs="sap.ui.core,sap.m,sap.tnt">
Modules should be accessed only after their dependent libs are preloaded. This can be ensured using various APIs depending on the use case:
Declaratively using sap/ui/core/ComponentSupport.js (Recommended):
<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>
Doc: Declarative API for Initial Components, Sample: https://embed.plnkr.co/16J1TFICxbqETCzaxuZ0
Using an inline-script (Only if there is no manifest.json; only for small demos):
<script id="sap-ui-bootstrap" src="..."
data-sap-ui-libs="sap.ui.core, sap.m, sap.tnt"
data-sap-ui-async="true"
...
></script>
<script>
sap.ui.getCore().attachInit(function() {
// your code...
});
</script>
<body class="sapUiBody" id="content"></body>
Additionally, avoid referencing controls via global names (e.g. sap.tnt.…)! Instead, require the modules accordingly:
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
// ...
},
});
});
From the doc:
[...] your application modules have to facilitate the concept for defining and handling of modules in UI5 that is aligned with the asynchronous module definition (AMD) standard.
[...] All necessary module dependencies [...] need to be handled by sap.ui.require or sap.ui.define.
See also the topic Modules and Dependencies.
It's also important to always check if the target module is available in the UI5 version at all. For example, the sap.tnt.InfoLabel was introduced in 1.54. You might get a 404-error if you're trying to require a module that doesn't exist yet.
In order to see which UI5 version your app is running with, press Ctrl+Shift+Left Alt+P.
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
