Why Sightly is not including dependency client library ?

[Mario248]

I am trying to include client library using Sightly using below code.

<sly data-sly-use.clientLib="${'/libs/granite/sightly/templates/clientlib.html'}"></sly>
<sly data-sly-call="${clientLib.js @ categories='hero-platform'}"></sly>

This code works but it is including the client library without it's dependency. 

View source -  <script src="/etc.clientlibs/solution/clientlibs/hero-platform.js"></script>

I expect this data-sly-call will include "jquery" and "bootstrap" dependencies. Any reason why it is not working ? I dont see any error in log.

[A_H_M_Imrul · Accepted solution]

@Mario248 

I don't see anything wrong with the setup however, I hope you have separate clientlibs (for js) with categories jquery and bootstrap. 

Here is an article with clear explanation (just in case you need): https://khakiout.wordpress.com/2016/02/23/aem-clientlibs-difference-between-dependencies-and-embed/

[aanchal-sikka]

Hello @Mario248 

Majority of the documentation has the js include as a single call, like

 <sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html" 
    data-sly-call="${clientlib.all @ categories='clientlib1,clientlib2'}"/>

 Can you please check, if merging them in a single call changes the behavior?

[Mario248]

Should it pick all the dependencies automatically ? 

[aanchal-sikka]

Yes @Mario248 

For dependencies, there would be separate <script> calls.

The link shared by @A_H_M_Imrul has good examples.

[Mario248]

No, it is actually same API call. By default it should pick up all dependencies and load the dependencies first before actual clientlibs. 

[EstebanBustamante]

@Mario248, can you explain why you believe this isn't working? Are the JS/CSS files missing from the page, resulting in broken styles and functionality related to jQuery and Bootstrap? Or is it that you don't explicitly see the "jquery" and "bootstrap" links in the HTML, leading you to think it's not functioning as expected?

All the dependencies will be combined into a single minified JS/CSS file. In your HTML, you should observe something labeled "dependencies" being included, similar to the following:

Hope this helps .

[kautuk_sahni]

@Mario248 Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.