Skip to Content

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

    img1.JPG

      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

    img2.JPG

    npm install –save-dev gulp-uglify

    img3.JPG

  npm install –save-dev gulp-if

    img4.JPG

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

  img5.JPG

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

img6.JPG

Share your file using eclipse tool with the ABAP system.

To report this post you need to login first.

4 Comments

You must be Logged on to comment or reply to a post.

    1. Sanket Chimalwar Post author

      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 . 🙂

      Rgds

      Sanket

      (0) 
  1. Sung-Yen Yang

    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.

    events.js:72
      throw er; // Unhandled 'error' event
      ^
    Error
      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.

    …gulp.task(

      ‘ui5preload’,

      function(){

        return gulp.src(

          [

            ‘view/**.+(js|xml)’,

            ‘Component.js’

          ]

        )…

    Regards,

    Nick

    (0) 
    1. LAN XIAO

      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. 😥

      (0) 

Leave a Reply