Skip to Content

How to create component-preload.js in easy steps

I had issues creating component-preload.js file for my SAPUI5 application project. I am not describing what component-preload.js file is as there are already many post for that. I would keep this to on “How to create component-preload.js File” in some easy steps. The following steps were done on a windows machine.

1. First you need to install the Node.js on your system. Download the exe file and run it like any other software installation.

2. Now install gulp with the following command on the command prompt. This can be done on the project workspace folder ( webcontent ) also.

    npm install –save gulp-install


      More details can be found here gulp-install

3. Once you have gulp installed, you need to install the following gulp plugins. Enter the following commands at the command prompt.

    npm install –save-dev gulp-ui5-preload


    npm install –save-dev gulp-uglify


  npm install –save-dev gulp-if


4. Create a new file gulpfile.js in the same folder where the component.js file resides ( webcontent ) – check attachments

5. Now replace the “yournamespace” in the gulpfile.js with your project name.

6. Run the following command in the command promp to generate the component-preload.js file. This should be in the folder where you have the component.js file.

    gulp ui5preload

      After successful execution of the command you can the following


   If you get any error at this command try all the previous steps here in the same folder.


Share your file using eclipse tool with the ABAP system.

You must be Logged on to comment or reply to a post.
    • Hi Robin,

      You are correct and i faced some problems while executing these steps. I had to refer a couple of other blogs to solve my issues. I just tried to bring all at one place and put it together. Till last week i was not aware of the "grunt" word. I tried to mention all those steps in a simple way so that even a layman can try to execute it. Hopefully it solves the purpose . 🙂



  • Hi Sanket,

    Thanks for sharing your experience on SCN with us.

    I followed your steps to generate my Component-preload.js, but unfortunatelly failed.

    But, eventually I still figured out the root-cause and generated the file.

    I want to share how I solved my problem at here for you and others.

    • my environment doesn't have gulp, so I entered "npm install gulp" in my UI5 project folder to have gulp.cmd.
    • these node modules are installed under my UI5 project folder. I need to switch to ".bin" folder in "node_modules" folder to execute gulp command.
    • I executed "glup ui5preload", but got following error dump.

      throw er; // Unhandled 'error' event
      at new JS_Parse_Error (/Users/bv...

    • After google for awhile, I realized I need to revise following bold text part in the gulpfile.js and then I got a Component-preload.js for my project.




        return gulp.src(








    • i got same problem like you,  then i followed you and my problem was solved,i found that requests is decreased, but i didn't see a huge promotion when loading app. 😥