I’ve built a Component-preload.js by [email protected] with compatVersion: "1.44" parameter since my SAPUI5 Core is 1.44.
The script:
openui5_preload: {
component: {
options: {
resources: {
cwd: "<%= dir.webcontent %>",
prefix: "<%= dir.webapp %>/<%= dir.webcontent %>",
src: [
"**/*.js",
"**/*.html",
"**/*.json",
"**/*.fragment.html",
"**/*.fragment.xml",
"**/*.fragment.json",
"**/*.view.html",
"**/*.view.xml",
"**/*.view.json",
"**/*.properties",
"manifest.json",
"!test/**"
]
},
compatVersion: "1.44",
dest: "<%= dir.dist %>"
},
components: "<%= dir.webapp %>/<%= dir.webcontent %>"
}
}
As the result, I have a file, which contains everything I mentioned in the script, I store it in WebContent folder, and update the paths according to the hierarchy, just like it is described in the SAPUI5 book.
When I test it, I get a strange behaviour — a browser loads both Component-preload.js and all the files, which are mentioned in it. In other words, after generation of the preloader browser downloads it, but ignores its content and still requests the separate files, although they are already located in this preloader,
I want the files, mentioned in the preloader, will not be requested as separate files by the browser. Otherwise, there is no reason to use preloader. How can I fix it?
P.S. The issue is similar to Minified *.properties and *.css are still requested.
Answer
Namespace is not an actual file path, it’s whatever you have defined in your manifest as the root of your application, which is then propagated to every other file. The preload itself lives wherever your Component.js lives.
The preload looks like this:
To elaborate a bit; UI5 loads and caches files internally based on the namespace and filename, which is, as per the ID in the screenshot:
com.bus.inbox.mist.businessrolechange.Component.js for the component or com.bus.inbox.mist.businessrolechange.controllers.View1.controller.js for the controller of View1. If the preload doesn’t match these id’s, the caching mechanism cannot find them and the actual files are loaded regardless of the presence of the preload file.
In the example below (from WebIDE), the dist folder is deployed, and the webapp folder is stored in a git repository.
In some cases, the root is defined slightly differently, for instance resourceRoots in the bootstrap of the index.html file. This is mostly for standalone apps.
<!-- Bootstrapping UI5 -->
<script id="sap-ui-bootstrap"
src="resources/sap-ui-core.js"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_belize"
data-sap-ui-compatVersion="edge"
data-sap-ui-preload="async"
data-sap-ui-resourceroots='{"com.bus.inbox.mist.businessrolechange": "."}'
data-sap-ui-frameOptions="trusted">
</script>