Search code examples
htmlcomponentssapui5

openUI5 doing descriptor for application with custom data-sap-ui-resourceroots fail to load component-preload.js

I am still new at OpenUI5 and I try to apply a descriptor for application inside my project, I get appropriate openUI5 file via npm so my foler structure is as follow :

/node_modules
    /resources
/webapp
    /controller
    /i18n
    /view
    /Component.js
    /index.html
    /manifest.json
/package.json

I want to use manifest.json so I have in index.html :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Sylvain's page</title>
    <script id="sap-ui-bootstrap"
        src="../node_modules/resources/sap-ui-core.js"
        data-sap-ui-theme="sap_belize"
        data-sap-ui-libs="sap.m"
        data-sap-ui-compatVersion="edge"
        data-sap-ui-async="true"
        data-sap-ui-resourceroots='{
            "openui5.sylvain": "./"
        }'
        data-sap-ui-onInit="module:sap/ui/core/ComponentSupport">
    </script>
</head>
<body class="sapUiBody" id="content"></body>
<div data-sap-ui-component data-name="openui5.sylvain" data-id="container" data-settings='{"id" : "sylvain"}'></div>
</html>

and I get the error:

GET file: C:/Users/Documents/test/webapp/Component-preload.js net::ERR_FILE_NOT_FOUND

I agree with this error the file is not in webapp/ but in node_module/resources/sap/ui/core

then I tried by replacing data-sap-ui-onInit as follow:

data-sap-ui-onInit="module:../node_modules/resources/sap/ui/core/ComponentSupport"

and I get

ui5loader-dbg.js:471 Uncaught (in promise) Error: relative name not supported ('../node_modules/resources/sap/ui/core/ComponentSupport.js'

Then I tried to replace by :

data-sap-ui-onInit="module:node_modules/resources/sap/ui/core/ComponentSupport">

and I get :

Uncaught (in promise) Error: failed to load 'node_modules/resources/sap/ui/core/ComponentSupport.js' from ../node_modules/resources/node_modules/resources/sap/ui/core/ComponentSupport.js: script load error at HTMLScriptElement.b (ui5loader-dbg.js:1336)

Then what should I do for make it work properly ?

Solution

  • Initially, you did everything right.

    This error appears in the console in the browser during development and testing. It does not affect anything and will disappear after the application is built. I advise you not to fix anything, ignore the error and continue development.

    This builder task is responsible for generating this file, here is the link to the API:

    https://sap.github.io/ui5-tooling/api/module-@ui5_builder.tasks.html#.generateComponentPreload