如何本地运行SAPUI5中sap.m.UploadCollection控件的示例项目？

问题描述 #

我正在查找sap.m.UploadCollection控件的示例，已下载示例包并通过以下命令在本地运行：

npm install

随后执行：

ui5 serve -o index.html

访问http://localhost:8080/index.html时，控制台出现以下错误：

2022-08-15 16:56:35.802600 Failed to load component for container container - ModuleError: Failed to resolve dependencies of 'sap/m/sample/UploadCollection/Page.controller.js'
-> 'sap/m/MessageToast.js': failed to load 'sap/m/MessageToast.js' from ./resources/sap/m/MessageToast.js: script load error
ModuleError: Failed to resolve dependencies of 'sap/m/sample/UploadCollection/Page.controller.js'

尝试将Page.controller.js移至新建的controller文件夹、Page.view.xml移至新建的view文件夹后，仍出现其他错误。

解决方案 #

• 恢复原始文件结构：不要手动移动controller和view文件，示例项目的文件路径与组件配置绑定，随意移动会导致路径识别失败。
• 更新UI5 CLI到最新版本：

  npm update -g @ui5/cli
  

• 检查并修正ui5.yaml配置：确保文件中正确声明所需的UI5库依赖，示例配置参考如下：

  specVersion: "3.0"
  metadata:
    name: sap.m.sample.UploadCollection
  type: application
  dependencies:
    framework:
      name: SAPUI5
      version: "1.102.0" # 需匹配示例对应的UI5版本
      libraries:
        - name: sap.m
        - name: sap.ui.core
        - name: sap.ui.unified
  

• 清理并重新安装依赖：

  rm -rf node_modules package-lock.json
  npm install
  

• 重新启动本地服务：

  ui5 serve -o index.html
  

• 若仍有资源加载问题，确认网络可正常访问UI5公共资源库，或配置本地UI5 SDK路径到ui5.yaml中。

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