如何在UI5应用的manifest.json中配置独立部署的复用组件？

Great question! Moving the module path configuration to manifest.json is definitely the cleaner approach for UI5 apps, and there's a way to make this work with your standalone-deployed DocViewer component without relying on jQuery.sap.registerModulePath. Here's how to set it up properly:

Step 1: Declare the Component Dependency in manifest.json #

First, let your main app know about the standalone DocViewer component by adding it to the sap.ui5/dependencies/components section. Lazy loading is ideal here since you're embedding the component directly in a view:

"sap.ui5": {
  "dependencies": {
    "components": {
      "de.mycomp.base.DocViewer": {
        "lazy": true
      }
    }
  },
  // ... other existing configs
}

Step 2: Use Virtual Relative Paths + Neo-app.json Routing #

The key workaround for UI5's absolute path restriction in resourceRoots is to use a virtual relative path in manifest.json, then map that path to your component's actual deployment location via neo-app.json. This works seamlessly across WebIDE, SCP, and on-prem environments.

First, add the resourceRoots entry in manifest.json with a logical relative path (you can use any name that makes sense for your project):

"sap.ui5": {
  "resourceRoots": {
    "de.mycomp.base.DocViewer": "./standalone-components/docviewer"
  },
  // ... other existing configs
}

Then update your neo-app.json to route this virtual path to the actual component location. For SCP deployments:

{
  "path": "/standalone-components/docviewer",
  "target": {
    "type": "application",
    "name": "docviewer" // Your SCP-deployed component name
  },
  "description": "Route to standalone DocViewer component"
}

For local on-prem testing (e.g., against your BSP app zdocviewer), you can override this route in a local neo-app.json (WebIDE supports this via environment-specific configs):

{
  "path": "/standalone-components/docviewer",
  "target": {
    "type": "url",
    "url": "/sap/bc/ui5_ui5/sap/zdocviewer"
  },
  "description": "Local route to on-prem DocViewer BSP"
}

Step 3: Keep Your ComponentContainer Declaration #

You don't need to change your existing ComponentContainer code in view.xml—UI5 will now resolve the component path using the resourceRoots and routing config:

<core:ComponentContainer 
  name="de.mycomp.base.DocViewer" 
  component="de.mycomp.base.DocViewer" 
  settings='{"param1":"value1"}'/>

Why This Works #

• The relative path in resourceRoots complies with UI5's portability rules, while neo-app.json acts as a proxy to map that virtual path to the actual standalone component location.
• This keeps all component configuration centralized in standard UI5 files, avoiding low-level APIs like jQuery.sap.registerModulePath.
• The setup is environment-agnostic: you just adjust the neo-app.json route for each deployment target without touching the main app's manifest.json.

Bonus: Declarative Component Usages (Optional) #

For even more control (like default settings or lifecycle management), you can use sap.ui5/componentUsages in manifest.json:

"sap.ui5": {
  "componentUsages": {
    "DocViewerInstance": {
      "name": "de.mycomp.base.DocViewer",
      "settings": {
        "param1": "value1" // Default settings can live here
      }
    }
  },
  // ... other configs
}

Then reference it in your view with the usage name:

<core:ComponentContainer usage="DocViewerInstance"/>

This makes your component integration fully declarative and aligned with modern UI5 best practices.

内容的提问来源于stack exchange，提问作者Mat Hay