一个带有多个 component.js 的应用程序:如何加载共享模块? [英] One app with multiple component.js: How to load shared modules?

问题描述

我们有一个 SAPUI5 应用程序，我们在其中定义了多个组件(即多个 Component.js 文件)，每个组件在各自的子文件夹中作为应用程序根的直接子文件夹.下图显示了项目结构:

组件 1 指定为 com.test.component1，组件 2 指定为 com.test.component2.共享代码位于 root/shared 并在每个组件的控制器中定义为依赖项.

共享/Utils.js:

sap.ui.define([], function () {严格使用"；返回 {...};};

component1/controller/Controller1.js:

sap.ui.define(["sap/ui/core/mvc/控制器",测试/共享/实用程序"], 函数 (BaseController, Utils) {严格使用"；//控制器代码});

在本地(或在 WebIDE 中)运行 index.html 文件这一切正常，但是当我们尝试将不同的组件集成到 Fiori Launchpad 时找不到共享资源(它尝试从/resources/shared 加载它们).我们认为这与为引导定义的 data-sap-ui-resourceroots='{"com.test": ""} 有关，它在 Component.js 或清单中缺失.json 文件.

为各个组件注册资源路径 com/test/shared 的正确方法是什么?

解决方案

解决此问题的一种方法是在应用程序描述符 (manifest.json) 中定义 resourceRoots 属性:

<代码>{...sap.ui5":{...资源根":{"com.test.shared": "./../shared"},...}}

尽管文档中写了什么，这仍然有效:><块引用>

以资源名称前缀为键的 URL 位置映射；只允许组件内部的相对路径，不能使用.."字符

We have a SAPUI5 app in where we define multiple components (i.e., multiple Component.js files) each in a respective subfolder as direct child of the application root. The following image shows the project structure:

Component 1 is specified as com.test.component1, component 2 as com.test.component2. Shared code is located in root/shared and defined as dependencies in the controllers of each component.

shared/Utils.js:

sap.ui.define([], function () {
    "use strict";

    return {...};
};

component1/controller/Controller1.js:

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "test/shared/Utils"
], function (BaseController, Utils) {
    "use strict";
    // controller code

});

Running the index.html file locally (or in WebIDE) this all works, but the shared resources are not found when we try to integrate the different components into the Fiori Launchpad (it tries to load them from /resources/shared). We believe this has sth to do with the data-sap-ui-resourceroots='{"com.test": ""} defined for bootstrapping which is missing either in the Component.js or the manifest.json file.

What's the right way to register the resource path com/test/shared for the individual components?

解决方案

One way to solve this is by defining the resourceRoots attribute in the application descriptor (manifest.json):

{
    ...
    "sap.ui5": {
        ...
        "resourceRoots" : {
            "com.test.shared": "./../shared"
        },
        ...
    }
}

This works despite what's written in the documentation:

Map of URL locations keyed by a resource name prefix; only relative paths inside the component are allowed and no ".." characters

这篇关于一个带有多个 component.js 的应用程序:如何加载共享模块?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！