Skip to Content

Problem with loading of Component.js

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.

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

4 Answers

  • Aug 05, 2017 at 06:16 PM

    your folder structure

    Add comment
    10|10000 characters needed characters exceeded

  • Aug 06, 2017 at 12:24 PM

    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

    Add comment
    10|10000 characters needed characters exceeded

  • Aug 06, 2017 at 10:02 AM

    Here it is, Jun:

    BR.

    Denis.

    Add comment
    10|10000 characters needed characters exceeded

  • Aug 07, 2017 at 02:55 PM

    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 (,).

    Add comment
    10|10000 characters needed characters exceeded