Using External JavaScript Libraries

To reference a JavaScript library that you’ve uploaded as a static resource, use a <ltng:require> tag in your .cmp or .app markup.

The framework’s content security policy mandates that external JavaScript libraries must be uploaded to Salesforce static resources. For more information on static resources, see “Static Resources” in the Salesforce online help.

Here’s an example of using <ltng:require>.
<ltng:require scripts="{!$Resource.resourceName}"
    afterScriptsLoaded="{!c.afterScriptsLoaded}" />

resourceName is the Name of the static resource. In a managed packaged, the resource name must include the package namespace prefix, such as $Resource.yourNamespace__resourceName. For a stand-alone static resource, such as an individual graphic or script, that’s all you need. To reference an item within an archive static resource, add the rest of the path to the item using string concatenation.

The afterScriptsLoaded action in the client-side controller is called after the scripts are loaded. Don't use the init event to access scripts loaded by <ltng:require>. These scripts load asynchronously and are most likely not available when the init event handler is called.

Here are some considerations for loading scripts:

Loading Sets of Scripts
Specify a comma-separated list of resources in the scripts attribute to load a set of resources.
Note

Note

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, if you have more than one JavaScript library to include into a component the scripts attribute should be something like the following.

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

Loading Order
The scripts are loaded in the order that they are listed.
One-Time Loading
Scripts load only once, even if they’re specified in multiple <ltng:require> tags in the same component or across different components.
Parallel Loading
Use separate <ltng:require> tags for parallel loading if you have multiple sets of scripts that are not dependent on each other.
Encapsulation
To ensure encapsulation and reusability, add the <ltng:require> tag to every .cmp or .app resource that uses the JavaScript library.

<ltng:require> also has a styles attribute to load a list of CSS resources. You can set the scripts and styles attributes in one <ltng:require> tag.

If you’re using an external library to work with your HTML elements after rendering, use afterScriptsLoaded to wire up a client-side controller. The following example sets up a chart using the Chart.js library, which is uploaded as a static resource.
<ltng:require scripts="{!$Resource.chart}" 
              afterScriptsLoaded="{!c.setup}"/>
<canvas aura:id="chart" id="myChart" width="400" height="400"/>
The component’s client-side controller sets up the chart after component initialization and rendering.
setup : function(component, event, helper) {
    var data = {
        labels: ["January", "February", "March"],
        datasets: [{
            data: [65, 59, 80, 81, 56, 55, 40]
        }]
    };
    var el = component.find("chart").getElement();
    var ctx = el.getContext("2d");
    var myNewChart = new Chart(ctx).Line(data);
}