将 UI5 资源升级到 1.54 后,本地引导 SAPUI5 应用程序抛出错误

Bootstrapping SAPUI5 App Locally Throws Error after Upgrading UI5 Resources to 1.54

本地 SAPUI5 应用程序不再与 1.54.xxx 一起工作。它们与 1.52.xxx.

配合得很好

"local SAPUI5 applications" 我的意思是应用程序:

这样的应用程序可以很好地与 1.52.xxx:

src="https://openui5.hana.ondemand.com/1.52.11/resources/sap-ui-core.js"

但从 ui5loader-dbg.js 转储时出现错误,其中 1.54.xxx:

src="https://openui5.hana.ondemand.com/1.54.4/resources/sap-ui-core.js"

错误发生在加载 Components.js 或控制器的过程中,示例来自两个程序:

ui5loader-dbg.js:882 Uncaught Error: failed to load 'zprog/Component.js' from ./Component.js
ui5loader-dbg.js:882 Uncaught Error: failed to load 'ztest2/controller/App.controller.js' from ./controller/App.controller.js: 0 -

您是否知道其中的原因并知道如何使用 1.54 运行 本地 SAPUI5 应用程序?

我认为主要原因是浏览器不支持本地文件 (file://) 的异步 XHR,因为 mentioned in MDN:

Some browsers (including Chrome) will not run async requests (see Fetching data from the server) if you just run the example from a local file. This is because of security restrictions (for more on web security, read Website security).

随着UI5逐渐走向异步(#UI5Evo),出于安全考虑,应避免使用file://协议开发应用

相反,尝试设置一个本地 HTTP 服务器,那里有很多工具,例如 Web Server for Chrome. Running the app on the server also allows the browser to respect CORS(无需打开 web -安全关闭)。


气馁的方法

尽管 framework not supporting the file:// protocol, relying on unsupported and buggy command-line flag,忽略安全标准,并且不确定 解决方法 将来是否仍然有效,您仍然可以制作应用程序 运行 如果所有请求都是异步的,则版本为 1.54。例如:

  • 给定:
    • Chrome的命令行标志
      • --disable-web-security --user-data-dir
      • --allow-file-access-from-files
    • UI5 sample application 在等效的 GitHub 问题上提供
  • 加载sap-ui-core.js文件之前,激活隐藏的实验标志xx-async
  • <script>
      window["sap-ui-config"] = {
        "xx-async": true
      }
    </script>
    

  • 并像往常一样异步加载其他所有内容,例如在创建 ComponentContainer or root view 时提供 async: true


更新 (2018/05/10)

就在昨天,有一个 new commit 更清楚地说明了为什么在升级到 1.54 后它不起作用以及为什么上面的解决方法必须在所有地方使用异步 XHR。

1.54,new internal file ui5loader.js was introduced. Besides many cool features it brought, it also took mostly the code from jquery.sap.global.js away that handled loading modules. While migrating, a fallback to sync XHR had to be implemented for the case when legacy sync APIs are used. That was realized with the function loadSyncXHR

在那个 loadSyncXHR 函数中,当 returning XHR 状态为 200 时,模块被认为 已加载 。然而,正如新提交所暗示的那样,一些浏览器,包括 Chrome、return 在文件从 file:// 协议加载时的状态 0。那张支票直到昨天才丢失,所以必须添加它。

if ( xhr.status === 200 || <strong>xhr.status === 0</strong>)

如果您 运行 与 src="https://openui5nightly.hana.ondemand.com/..." 相同的项目而不更改代码,则不应再抛出错误。