Component-preload loaded but the other files as well

[marcosandrade]

Hello guys,

I have completed a development of Fiori application and the last step was to generate the Component-preload file.

I used the Gruntjs plugin grunt-openui5 to generate the file. After that I uploaded the file into my application project as we can see below.

After running the application in the Launchpad I noticed the Component-preload is loaded properly but the files (views, controllers, utils, i18) are also being loaded.

Although the Componet-preload is loaded it is not being used because the application is still pointing out to the single files if I try to debug.

I also tried to add the parameter data-sap-ui-preload="sync" in the index.html file but still didn't kick in.

any suggestion?

looking forward to hearing from you.

Kind Regards

Marcos Andrade

[kammaje_cis · Accepted solution]

If a file/module is not found within Component-preload.js, then it will be loaded directly.

As Vladimir said, the reason the files were loaded individually because framework could not find them in component-preload.

Problem might with prefixes/namespace, naming etc within the component-preload file.

[DK007]

Hi,

I'm running into same issue. Even though I have Component-preload.js, each and every file is getting called. Below are the screenshot of my index.html, Component-preload.js and Network trace from Chrome browser.

index.html

Component.preload.js. Event I tried chaning the name to zui5app/Component-preload.

Network Trace

Appreciate your time and help.

Thanks,

Dheeram

[kai2015]

your component name differs from your component-preload name

[marcosandrade]

Kai is right,

you must keep the same component name including the component name space.

[DK007]

Hi Marcos,

I tried having my Componenet-preload name as my Component. Do I need to prefix preload with my application name? Attached is the gulpfile.js that I was using to generate Component-preload.js.

I'm sure I'm doing something wrong.

Thanks,

Dheeram

gulpfile.txt.zip

[marcosandrade]

Hello Dheeram,

have you tried to change the name in the preload file from "zui5app.Component-preload" to "gov/doi/fbms/Component-preload" you can do the same wherever the file refer to that name mainly in the beginning of each row. this should work.

if it does not please send the file after you changed.

I haven`t used the gulpfile I used the gruntjs with ui5 plugin. But I know that both tools work fine.

hope it helps you.

[DK007]

Hi Marcos,

I changed. Attached is the new generated Component-preload.js file.

Thank you very for much for your help. I tried to grunt, but somehow lost in creating grunt file. When you get a chance can you please let me know how to create a Gruntfile.js and also some instructions(looks like SAP is recommending to use grunt to generate preload file with this tool)

Thanks,

Dheeram

Component-preload.txt.zip

[marcosandrade]

Hello Dheeram,

you forgot to change the name convention in the modules of the preload file

   "modules": {

        "zaurapp/Component.js":

all the modules name has to follow the name space you have defined in this case should be.

   "modules": {

        "gov/doi/fbms/Component.js":

the video below explains how to install gruntjs and its plugin

How to install grunt and grunt plugins in windows - YouTube

and the plugin below is the one that generates the preload file

https://www.npmjs.com/package/grunt-openui5

[DK007]

Hello Marcos,

I added namespace prefix to all my modules. Still its not resolved. Attached is the updated preload.

Once again thanks for your time and help.

Thanks,

Dheeram

Component-preload.txt.zip

[marcosandrade]

There is still something missing.

can you please send a screenshot of your project structure and the code of the Component.js file?

[DK007]

Attached are Component.js and screnshot of project.

Component.txt.zip

[marcosandrade]

I have tried to check if there was anything wrong with prefix and namespace. It seems that everything is OK.

I assume that your preload file has been loaded if you check in the chrome debugger it should like this.

I would suggest you to try creating the file using grunt-openui5 and check whether you can any different result.

let me know the outcome it will be good to record your outcome.

[DK007]

Hi Marcos,

Thanks and appreciate your time and help.

My preload is getting called, but still all other files are getting loaded, which I don't individual files to load.

Can you please send me the index.html, preload and component.js file of your project with screenshot of your project? I would like to compare it with mine.

Do you have a sample of Gruntfile.js for UI5 preload? I would like to use it to generate my preload file.

Thanks,

Dheeram

[DK007]

Hi Marcos,

I solved this issue. It's issue with my folder structure and namespace that I used for views. I created a separate application from scratch and followed proper namespace as per folder structure.

I have another question. Can we have models(I have few json data models, they just contain static data) and properties files preloaded??

Thanks a lot for providing the hint in first place.

Thanks,

Dheeram

[marcosandrade]

Hello Dheeram,

good to hear you made it.

Yes you can preload the properties files i18n smoothly.

As for json file, although the plugin allows us to upload files with json format I haven`t tried to merge them.

you can give it a go and see how it goes, I think this should work as well.

let me know.

Thanks

[Former Member]

This message was moderated.

[marcosandrade]

Hello Guys,

I made a tiny little mistake. In the preload file I defined the component name as freshfields/hcm/ole/rep

in the component file I defined the name as freshfields.hcm.ole.report

I shorted the report word in the preload file that`s why it didn`t work.

now it is working fine

thank you for your support.

[seVladimirs]

Yep, was about to post the same and yes I'm using openui5 grunt plugin as well. no issues so far, working as a charm.

FYI, in case your application will have more then one i18n file it make sense to remove it from -preload file

[marcosandrade]

That`s is an interesting point about i18n,

what is the rational behind removing from preload file?

[seVladimirs]

it depends on the number of supported languages, more i18n files -> bigger preload file -> app loading time goes down. Therefore it might be better to exclude it as normaly one locale variant is needed for user.

[marcosandrade]

That`s a good point. If the application is used for let`s say 5 countries we can have as a separate file because only one additional request will be made to the server.

I will take that into account when facing this situation.

Thanks

I also checked that there is no need to have the -dbg files in the project. I tested the Launchpad with the variable sap-ui-debug=true and the framework ignores the preload file and loads the normal resource files with that we can debug from there.

[seVladimirs]

yes, you can also pass sap-ui-preload=' ' and then preload is skipped.

[marcosandrade]

Thank you for your answers.

have you tried to generate the preload file using grunt-openui5??

find below the generated preload file

I also checked he Component name to see if the name was correct

and also checked the Index file

any idea what is wrong with the preload file?

[kammaje_cis]

I have used Gulp, not Grunt.

I did it for applications without index.html. (for Fiori Launchpad)

I do not see anything wrong with your preload file. I guess  data-sap-ui-resourceroots entry might be interfering with how framework loads files. Can you try once without that entry?

[seVladimirs]

Hi,

Your Component-preload.js was incorrectly generated therefore framework is using fallback and loads applications anyway by requesting normal application resources.

Your Component-preload.js file should look be similiar to example below

jQuery.sap.registerPreloadedModules({
"version": "2.0",
"name": "sap/ui/demo/Component-preload",
"modules": {
...
}
});