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.
<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:
<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.
<ltng:require scripts="{!$Resource.chart}" afterScriptsLoaded="{!c.setup}"/> <canvas aura:id="chart" id="myChart" width="400" height="400"/>
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); }