在 SAPUI5 中加载 amcharts 库 - component.js vs index.html

Question

我在 SAPUI5 中加载 amcharts 库时遇到问题。我要加载 3 个 amCharts 库，核心、图表和动画。我将它们放在我的项目结构中的一个名为 libs 的文件夹中...请注意，我想使用 component.js 文件而不是 index.html，因为我的应用程序将从 Fiori Launchpad 启动。

经过一些很好的建议，我现在将它们加载到 manifest.json 文件中，如下所示

        "resources": {
            "js": [
                {
                    "uri": "libs/core.js"
        },
                        {
                    "uri": "libs/charts.js"
        },
                        {
                    "uri": "libs/animated.js"
        }
        ],

            "css": [
                {
                    "uri": "css/style.css"
                }
            ]
        },

当我通过 index.html 文件测试应用程序时......它可以工作！

当我使用 component.js 文件进行测试时，我在控制台中收到以下错误

Failed to load resource: the server responded with a status of 404 ()
The issue is most likely caused by application znrw.amCharts. Please create a support incident and assign it to the support component of the respective application. - Failed to load UI5 component with properties: '{
    "asyncHints": {
        "waitFor": []
    },
    "name": "znrw.amCharts",
    "url": "../../../../../webapp",
    "id": "application-Test-url-component",
    "componentData": {
        "startupParameters": {}
    },
    "async": true
}'. Error likely caused by:
TypeError: Cannot read property '1' of null

error in launchpad

所以我的问题是，我是否必须在 component.js 文件中添加一些内容才能加载库？还是我需要在 manifest.json 文件中做更多的事情？

目前，组件文件如下所示：

    "sap/ui/core/UIComponent",
    "sap/ui/Device",
    "znrw/amCharts/model/models"
], function (UIComponent, Device, models) {
    "use strict";

    return UIComponent.extend("znrw.amCharts.Component", {

        metadata: {
            manifest: "json"
        },

        /**
         * The component is initialized by UI5 automatically during the startup of the app and calls the init method once.
         * @public
         * @override
         */
        init: function () {
            // call the base component's init function
            UIComponent.prototype.init.apply(this, arguments);

            // enable routing
            this.getRouter().initialize();

            // set the device model
            this.setModel(models.createDeviceModel(), "device");
        }
    });
});

Answer 1

在清单的sap.ui 部分，您会找到resources 的条目。通常它只有一个 CSS 文件，但您也可以定义外部 javascript 库。如果您要加载多个依赖项，请确保将它们按顺序排列

    "resources": {
        "js": [{
            "uri": "libs/mylib.js"
        }],
        "css": [{
            "uri": "css/style.css",
            "id": "style"
        }]
    }

如果一切顺利，您就可以使用window.amChart 或任何他们称为全局对象的对象