Refer separately deployed components for reuse in an ui5 app - sapui5

Question

i'm developing some apps, for which everyone needs to show a document in the same way. For this i created a new component which handles my documents in a separate component. I then just want to reuse this component from my different apps.
To embed my reuse component i used something like this in my view.xml:
<core:ComponentContainer
name="de.mycomp.base.DocViewer"
component="de.mycomp.base.DocViewer"
settings='\{"param1":"value1"\}'/>
To access it during runtime i have to declare the namespace of the reuse component and associate it with an resource-url. To achive this, i used the following coding in the init-method of my Component.js which uses my reuse-component DocViewer.
jQuery.sap.registerModulePath("de.mycomp.base.DocViewer", "/sap/bc/ui5_ui5/sap/zdocviewer");
zdocviewer in this case is the name of the bsp-application to which the reuse-component was deployed on premise. To have this also work in webide and on SAP-Cloud-Plattform i needed to add an entry to neo-app.json
like this:
{
"path": "/sap/bc/ui5_ui5/sap/zdocviewer",
"target": {
"type": "application",
"name": "docviewer"
},
"description": "my base document viewer"
},
where docviewer is the name of the deployed app with the reuse component on SCP.
The type application implies that this destination is an app.
This works so far on premise and on sap cloud.
but my problem is that i dont want to have the registerModulePath in my Component.js. Nearly every configuration of components takes place in the manifest.json file. So i tried to move this coding line to configuration in manifest.json, but i failed so far.
Here's what i did:
i added a dependency in section sap.ui5 and there in the dependency-entry like this:
"components": {
"de.dvelop.base.DvelopBaseDocViewer": {
"lazy": true
}
}
i added the following entry to sap.ui5 part
"resourceRoots": {
"de.dvelop.base.DvelopBaseDocViewer": "/sap/bc/ui5_ui5/sap/zdocviewer"
},
The problem here is, that its not allowed to use absolute paths in the value-part of the resource-root entries. So this is invalid:
- /sap/bc/ui5_ui5/sap/zdocviewer
- ../sap/bc/ui5_ui5/sap/zdocviewer
Only this is valid:
- sap/bc/ui5_ui5/sap/zdocviewer
- ./sap/bc/ui5_ui5/sap/zdocviewer
So this annotation is only usable for embedded components, where the reuse-component is in the same deployed project. But this is not my understanding of a reuseable component. So changing something in that component would make it neccessary to copy the files to all the app-projects using the component. And they all have to be deployed again.
So for now i made a fallback to the jquery.sap.registerModulePath because this works with deployed components to refer them from other independent components.
Or does anybody have an idea how to handle this better or more proper within manifest.json?
kind regards
Matthias

Answer 1

see here: ui5 reuse components: https://github.com/Yelcho/UI5-Comp-Routing
you mixed up here old and new approches, wrinting all steps in this answer would be very long. Here brief step to step approche:
define your componentUsages
"componentUsages": {
"myDoc": {
"name": "com.company.myDoc",
"settings": {},
"componentData": {},
"lazy": true
}}
define path mapping, in resourceRoots
"resourceRoots": {
"com.company.myDoc": "/sap/bc/ui5_ui5/sap/zdocviewer"
},
define a targed type component
"targets": {
"myDocTarget": {
"type": "Component",
"usage": "myDoc"
}
use nested routing
.getRouter()
.navTo("myDocRoute", {
id: oBindingContext.getProperty("CategoryID")
}, {
products: {
route: "list",
parameters: {
}
}
});