Require

ltng:require enables you to load external CSS and JavaScript libraries after you upload them as static resources. Use the styles attribute to specify a resource name and CSS file. Use the scripts attribute to specify a resource name and JavaScript file.

For example, if your static resource name is jsLibraries, include the jsMyStyles.css and jsLibOne.js files as follows.

1<aura:component>
2    <ltng:require
3        styles="{!$Resource.jsLibraries  + '/styles/jsMyStyles.css'}"
4        scripts="{!$Resource.jsLibraries + '/jsLibOne.js'}"
5        afterScriptsLoaded="{!c.scriptsLoaded}" />
6</aura:component>

Due to a quirk in the way $Resource is parsed in expressions, use the join operator to include multiple $Resource references in a single attribute. For example, to include JavaScript libraries jsLibOne.js and jsLibTwo.js in a component, set the scripts attribute as follows.

1scripts="{!join(',',
2    $Resource.jsLibraries + '/jsLibOne.js',
3    $Resource.jsLibraries + '/jsLibTwo.js')}"

The comma-separated lists of resources are loaded in the order you specify them in the scripts and styles attributes. The afterScriptsLoaded action in the client-side controller is called after the scripts are loaded.

To ensure encapsulation and reusability, add the <ltng:require> tag to every .cmp or .app resource that uses the CSS or JavaScript library. The resources only load once if they are specified in multiple <ltng:require> tags in the same component or across different components.

If errors occur when running components that use ltng:require, evaluate your static resource JavaScript in Locker Console to ensure it complies with Locker.

• Using External CSS
• Sharing JavaScript Code Across Components
• Using External JavaScript Libraries
• Locker Console