Skip to Content
0

Problem with loading of Component.js

Aug 05, 2017 at 05:40 PM

120

avatar image

Dear UI5 experts,

im was trying to test some modularization options within UI5 and i keep getting the error "failed to load 'Walkthrough/Component.js' from ./Component.js"

My code is actually very simple, that is why I can not understand what can be wrong right there.

My 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="../../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='{
     "Walkthrough": "./"
     }'>
  </script>
  <script>
    sap.ui.getCore().attachInit(function() {
      new sap.ui.core.ComponentContainer({
        name: "Walkthrough"
      }).placeAt("content");
    });
  </script>
</head>
<body class="sapUiBody"
  id="content">
</body>
</html>


My Component.js:

sap.ui.define([
  "sap/ui/core/UIComponent",
  "sap/ui/model/json/JSONModel",
  "sap/ui/model/resource/ResourceModel"
], function(UIComponent, JSONModel, ResourceModel) {
  "use strict";
  return UIComponent.extend("Walkthrough", {
    metadata: {
      rootView: "Walkthrough.view.App"
      manifest: "json"
    },
    init: function() {
      UIComponent.prototype.init.apply(this, arguments);
      let oData = {
        recipient: {
          name: "World"
        }
      };
      var oModel = new JSONModel(oData);
      this.setModel(oModel);
      let i18nModel = new ResourceModel({
        bundleName: "Walkthrough.i18n.i18n_en"
      });
      this.setModel(i18nModel, "i18n_en");
    }
  });
});

View:

<mvc:View controllerName="Walkthrough.controller.App"
  xmlns="sap.m"
  xmlns:mvc="sap.ui.core.mvc">
  <Button text="{i18n_en>showHelloButtonText}"
    press="onShowHello" />
  <Input value="{/recipient/name}"
    description="Hello {/recipient/name}"
    valueLiveUpdate="true"
    width="60%" />
</mvc:View>

And Controller:

sap.ui.define([
  "sap/ui/core/mvc/Controller",
  "sap/m/MessageToast",
  "sap/ui/model/json/JSONModel",
  "sap/ui/model/resource/ResourceModel"
], function(Controller, MessageToast, JSONModel, ResourceModel) {
  "use strict";
  return Controller.extend("Walkthrough.controller.App", {

    onShowHello: function() {
      let oBundle = this.getView().getModel("i18n_en").getResourceBundle();
      let sRecipient = this.getView().getModel().getProperty("/recipient/name");
      let sMsg = oBundle.getText("helloMsg", [sRecipient]);
      MessageToast.show(sMsg);
    }
  });
});

Could you give me any tipp why my Component will not be found due to the console?

Thank you very much in advance and BR.

Denis.

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

4 Answers

Jun Wu Aug 05, 2017 at 06:16 PM
0

your folder structure

Share
10 |10000 characters needed characters left characters exceeded
Sergio Guerrero Aug 06, 2017 at 12:24 PM
0

your index.html, component.js and project structure look fine to me... the one thing i noticed is that you have another folder, webapp, in between your Walkthough and the view/controller folders.. I think you need to bake that into the declaration of your resource roots? because of the reference where that is pointing to

the other thing i noticed is the spelling of Walkthough on the folder structure but in all your file references it is spelled differently as Walkthrough

(r doesn't exist in the folder name)

hope that works

Show 2 Share
10 |10000 characters needed characters left characters exceeded

Thank you very much for respond, Sergio!

First of all thanks for the tipp with the mistake of the word Walkthrough :/ My bad. I fixed it

In case of the webapp folder, do you mean I should do declare it like this?:

Because I still get this error:

BR.

0

try something like this -

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

0
Denis Yuzhakov Aug 06, 2017 at 10:02 AM
0

Here it is, Jun:

BR.

Denis.


Share
10 |10000 characters needed characters left characters exceeded
saurabh vakil Aug 07, 2017 at 02:55 PM
0

In your Component.js file there could be a problem with the below block of code. Try separating the rootView and manifest properties with a comma (,).

    metadata:{
      rootView:"Walkthrough.view.App"
      manifest:"json"},

Also, ideally the metadata section should just have the manifest property, rootView should be declared within the manifest.json file. Also try separating the rootView and manifest, properties with a comma (,).

Share
10 |10000 characters needed characters left characters exceeded