How to reuse a component from another application in UI5 1.38?

Question

Environement

Framework : SAPUI5 V1.38.39
IDE : SAP WEB IDE

Problem

I want to use a SAPUI5 application in another one, in order to do so I found the following resource: https://blogs.sap.com/2017/04/05/sapui5-how-to-reuse-parts-of-a-sapui5-application-in-othermultiple-sapui5-applications/

Code from the app where I want to reuse another one

in component.js in init I used :

var sPath = sHostUrl.includes("webidetesting") ? "https://gtyext.net" : sHostUrl;
jQuery.sap.registerModulePath("ztntapp", `${sPath}/sap/bc/ui5_ui5/sap/ztntapp/`);

And in my view :

<core:ComponentContainer 
    name="ztntapp" 
    manifestFirst="true" 
    component="ztntapp">
</core:ComponentContainer>

and in neo-app.json

{
    "path": "/sap/bc/ui5_ui5/sap/ztntapp/",
    "target": {
        "type": "destination",
        "name": "gtyext_net",
        "entryPath": "/sap/bc/ui5_ui5/sap/ztntapp/"
    },
    "description": "namespace.tntapp Resources"
}

Code from the reused app

in component.js

sap.ui.define([
    "sap/ui/core/UIComponent",
    "sap/ui/Device",
    "./model/models"
], function (UIComponent, Device, models) {
    "use strict";

    return UIComponent.extend("TrackAndTrace.ztntapp.Component", {

        metadata: {
            manifest: "json"
        },
        init: function () {
        [...]
        },
        [...]
   });
});

in neo-app.json (it is the default one created via SAP WebIDE):

{
  "welcomeFile": "/webapp/index.html",
  "routes": [
    {
      "path": "/resources",
      "target": {
        "type": "service",
        "name": "sapui5",
        "entryPath": "/resources",
        "version": "1.38.45"
      },
      "description": "SAPUI5 Resources"
    },
    {
      "path": "/test-resources",
      "target": {
        "type": "service",
        "name": "sapui5",
        "entryPath": "/test-resources",
        "version": "1.38.45"
      },
      "description": "SAPUI5 Resources"
    },
    {
      "path": "/webapp/resources",
      "target": {
        "type": "service",
        "name": "sapui5",
        "entryPath": "/resources",
        "version": "1.38.45"
      },
      "description": "SAPUI5 Resources"
    },
    {
      "path": "/webapp/test-resources",
      "target": {
        "type": "service",
        "name": "sapui5",
        "entryPath": "/test-resources",
        "version": "1.38.45"
      },
      "description": "SAPUI5 Test Resources"
    }
  ],
  "sendWelcomeFileRedirect": true
}

Error message

Uncaught Error: failed to load 'ztntapp/Component.js' from https://webidetesting278-a392f.dispatcher.hana.ondemand.com/sap/bc/ui5_ui5/sap/ztntapp/Component.js: Error: failed to load 'TrackAndTrace/ztntapp/model/models.js' from resources/TrackAndTrace/ztntapp/model/models.js

Points with neo-app.json :

• the application "ztntapp" itself works outside this application
• the path for component.js is https://webidetesting278-a392f.dispatcher.hana.ondemand.com/sap/bc/ui5_ui5/sap/ztntapp/Component.js however the path for model somehow become https://webidetesting278-a392f.dispatcher.hana.ondemand.com/webapp/resources/TrackAndTrace/ztntapp/model/models.js (I am not sure why "webapp/resources")
• https://webidetesting278-a392f.dispatcher.hana.ondemand.com/sap/bc/ui5_ui5/sap/ztntapp/model/models.js is found, resource should probably be loaded from here instead of /webapp/resources/TrackAndTrace/ but I don't know how to do so

Other research

• With the neo-app.json file, the problem is to locate the resource from the "ztntapp", I seen that there is also a jQuery.sap.registerResourcePath but I am not sure how to use it for this case

Acrobatics

I strongly suggest to upgrade UI5. The support for 1.38 will end this year. Only then, you can make use of the currently accepted solution. – Audley

Answer 1

In your first application (main app) please use manifest.json to add the component usage instead of jQuery.sap.registerModulePath in Component.js:

"componentUsages": {
    "ztntapp": {
            "name": " TrackAndTrace.ztntapp",
        "settings": {},
        "componentData": {},
        "lazy": true
    }
}

Then you need to adjust your main app neo-app.json to enable Run configuration to reach your second app (reuse app)

"routes": [
        {
      "path": "/webapp/resources/TrackAndTrace/ztntapp",
      "target": {
        "type": "application",
        "name": "ztntapp"
      }
    },
    {
      "path": "/resources/TrackAndTrace/ztntapp",
      "target": {
        "type": "application",
        "name": "ztntapp"
      }
    },

Then for the resue app: Deploy your app, so it becomes registered within the SAP WebIDE Fullstack workspace.

Then for your main app in WebIDE, chose Run > Run Configurations > Add configuration > Run as Web Application > Advanced Settings mark Use my workspace first and then press Get Resource Versions. On the list below, you should see your reuse app listed under Resources Name:

Alexalexa

Navigating with componentUsages is quite a new approach, which isn't available in 1.38. – Audley

Answer 2

Try with this :

jQuery.sap.registerModulePath("ztntapp", "/sap/bc/ui5_ui5/sap/ztntapp")

instead of jQuery.sap.registerModulePath("ztntapp", ${sPath}/sap/bc/ui5_ui5/sap/ztntapp/)

Also check this link : https://answers.sap.com/questions/668485/ui5-failed-to-load-componentjs-while-using-compone.html

Revisionist

Thank you for your message, I also tried and I get the same error, it finds component.js correctly but not the model.js neither the manifest.json – Acrobatics