Solved: Error: Failed to load component manifest.json

former_member260921 · ‎2018 Mar 29

Hi,

I am trying to implement "Step 9" of the "Walkthrough" tutorial in then "SAPUI5: UI Development Toolkit ...." using the SAP Web IDE.

When I load the page in the browser I get the following:

2018-03-29 15:25:52.686000 registerResourcePath ('', 'https://ui5.sap.com/resources/') - sap.ui.ModuleSystem
sap-ui-core.js:168:740
2018-03-29 15:25:52.688000 registerResourcePath ('SAPUI5_Walkthrough', './') - sap.ui.ModuleSystem
sap-ui-core.js:168:740
2018-03-29 15:25:52.688000 URL prefixes set to: - sap.ui.ModuleSystem
sap-ui-core.js:168:740
2018-03-29 15:25:52.690000 (default) : https://ui5.sap.com/resources/ - sap.ui.ModuleSystem
sap-ui-core.js:168:740
2018-03-29 15:25:52.690000 'SAPUI5_Walkthrough' : ./ - sap.ui.ModuleSystem
sap-ui-core.js:168:740
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help http://xhr.spec.whatwg.org/
jquery.sap.global-dbg.js:525:10
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://ui5.sap.com/resources/SAPIU5_Walkthrough/manifest.json. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
2018-03-29 15:25:53.548000 Failed to load component manifest from "SAPIU5_Walkthrough/manifest.json" (component SAPIU5_Walkthrough.Component)! Reason: Error: resource SAPIU5_Walkthrough/manifest.json could not be loaded from https://ui5.sap.com/resources/SAPIU5_Walkthrough/manifest.json. Check for 'file not found' or parse errors. Reason: -

It appears that the first registerResourcePath is being implemented automatically. The second registerResourcePath is coming from my index.html page:

So it is not looking for manifest.json in the correct location. It is appending the correct url to the automatically registered url:

https://ui5.sap.com/resources/SAPIU5_Walkthrough/manifest.json

I have already checked the other answers that come up when I search for "Failed to load component manifest.json." There are several of them but none seem to appy to this case.

Thanks for any help!

Regards,

Mel

saurabh_vakil · ‎2018 Mar 30

In your index.html file you have defined the resourceroot as below

data-sap-ui-resourceroots='{"SAPUI5_Walkthrough": "./"}'

But you are naming your Component as sap.ui.demo.walkthrough - this should match with the resourceroot name.

Please change the resourceroot in your index.html file as below

data-sap-ui-resourceroots='{"sap.ui.demo.walkthrough": "./"}'

bohan · ‎2018 Jul 23

Hi Mel,

I've encountered this problem recently. What I've found is that there is something wrong within my Component.js file.

The component name was like this:

return UIComponent.extend("Component", {

Then I corrected it to this:

return UIComponent.extend("sap.ui.demo.walkthrough.Component", {

Now my problem has been fixed.

Cheers,

Bohan

former_member260921 · ‎2018 Mar 30

Hi Saurabh,

Thanks for your answer.

SAPUI5_Walkthrough is the name of the project not sap.ui.demo.walkthrough.

I have changed the component name to be the same as the resourceroot name which is "

SAPUI5_Walkthrough". However I still get the same error:

2018-03-30 10:26:04.962000 Failed to load component manifest from "SAPIU5_Walkthrough/manifest.json" (component SAPIU5_Walkthrough.Component)! Reason: Error: resource SAPIU5_Walkthrough/manifest.json could not be loaded from https://ui5.sap.com/resources/SAPIU5_Walkthrough/manifest.json. Check for 'file not found' or parse errors. Reason: -

It seems like the line

src="https://ui5.sap.com/resources/sap-ui-core.js"

is causing the url for manifest.json to be:

https://ui5.sap.com/resources/SAPIU5_Walkthrough/manifest.json

The local path to the manifest.json is actually "/webapp/manifest.json".

It seems like the path to the SAPUI5 Library and the path to the resourceroots are not totally separarate from each other.

Regards,

Mel

former_member260921 · ‎2018 Mar 30

Hi Jun,

Thanks for your question. I am using the SAP Cloud Platform Web IDE.

I read that https://ui5.sap.com/resources/sap-ui-core.js

would always point to the most current version.

I don't know what the best link would be to use for the SAP Web IDE. I would appreciate any suggestions for a better url.

Thanks,

Mel

junwu · ‎2018 Mar 30

why using

src="https://ui5.sap.com/resources/sap-ui-core.js"?

former_member260921 · ‎2018 Mar 30

IHi Danilo,

Thanks for responding. Here they are.

Index.html:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">

<title>SAPUI5 Walkthrough</title>
<script
id="sap-ui-bootstrap"
src="https://ui5.sap.com/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-preload="async"
data-sap-ui-resourceroots='{
"SAPUI5_Walkthrough": "./"
}'
>
</script>
<script>
sap.ui.getCore().attachInit(function () {
new sap.m.Shell({
app : new sap.ui.core.ComponentContainer({
name : "sap.ui.demo.walkthrough",
settings : {
id : "walkthrough"
}
})
}).placeAt("content");

});
</script>
</head>

<body id="content">
</body>

</html>

manifest.json:

{
"_version": "1.8.0",
"sap.app": {
"id": "SAPUI5_Walkthrough",
"type": "application",
"i18n": "i18n/i18n.properties",
"title": "{{appTitle}}",
"description": "{{appDescription}}",
"applicationVersion": {
"version": "1.0.0"
}
},
"sap.ui": {
"technology": "UI5",
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
}
},
"sap.ui5": {
"rootView": {
"viewName": "SAPUI5_Walkthrough.view.App",
"type": "XML",
"async": true,
"id": "app"
},
"dependencies": {
"minUI5Version": "1.30",
"libs": {
"sap.m": {}
}
},
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "SAPUI5_Walkthrough.i18n.i18n"
}
}
}
}
}

former_member233854 · ‎2018 Mar 29

Please, could you share your index.html and your manifest.json?

It seems there is something wrong in your file.

------------------------------------------------------------------------------------

Actually I have just realized that you don`t even need the manifest.json in this step, you are probably mixing the steps/files.

I don`t see any problem in your manifest.json, but you component is probably wrong.

sap.ui.getCore().attachInit(function () {new sap.m.Shell({app : new sap.ui.core.ComponentContainer({name : "sap.ui.demo.walkthrough",settings : {id : "walkthrough"}})}).placeAt("content");

You need to use SAPUI5_Walkthrough in the property name. Your Component.js will be located in the source folder which you indicated in the index as below

data-sap-ui-resourceroots='{
            "SAPUI5_Walkthrough": "./"
         }'

So finally your script would be like this

sap.ui.getCore().attachInit(function () {new sap.m.Shell({app : new sap.ui.core.ComponentContainer({name : "SAPUI5_Walkthrough",settings : {id : "walkthrough"}})}).placeAt("content");

I would remove the manifest.json for now to test. Then run this in some web server like IIS, otherwise you might have problem with cross-origin

Error: Failed to load component manifest.json

Know the answer?

Need more details?

Accepted Solutions (1)

Accepted Solutions (1)

Answers (6)

Answers (6)