Loading amcharts libraries in SAPUI5 - component.js vs index.html

Question

I'm having trouble loading the amcharts libraries in SAPUI5. There are 3 amCharts libraries I want to load, core, charts and animated. I have them in my project structure in a folder called libs... please note that i want to use the component.js file not the index.html since my app will be launched from the Fiori Launchpad.

After some great advice I am now loading them in the manifest.json file like below

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

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

when i test the app via the index.html file... it works!

when i test using the component.js file I get the following error in the console

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

so my question is, do I have to add something to the component.js file to get the libraries to load? or is there something more I need to do in the manifest.json file?

currently, the component file looks like this:

    "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");
        }
    });
});

Does it work without the amcharts libraries imported? I don't know amcharts but if amCharts defines globally or does not support amd you might be better of loading them in the resources section of the manifest. — Jorg
Yeah it does. Can you tell me how load them in the manifest? I didn’t know that was possible? — Neil Ward

Jorg Jorg · Accepted Answer · 2019-04-18T00:55:17

In the sap.ui section of the manifest, you'll find an entry for resources. Generally it only has a CSS file in it but you can define external javascript libraries as well. If you're loading multiple dependent ones make sure to put them in order

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

If all is well, you'll just be able to use window.amChart or whatever their global object is called

Loading amcharts libraries in SAPUI5 - component.js vs index.html

1 Answers