How to properly load static resources in Lightning Components

Question

I've seen the thread in documentation here on loading static resources using ltng:require, but I don't quite get the formatting via the example. I'm looking for some assistance to make sure what i'm doing is correct, because i'm getting an error while attempting to load these resources in the browser.

These are my files in static resources

• Resource Name: MomentJS | Filename: /moment.min.js
• Resource Name: FullCalendarCSS | Filename: /fullcalendar.css
• Resource Name: FullCalendarJS | Filename: /fullcalendar.js
• Resource Name: jQuery | Filename: /jquery.min.js

This is the code I have to attach these files to my lightning component

fullCalendar.cmp

<aura:component controller="FullCalendarController" implements="force:appHostable">
  <ltng:require styles="{!$Resource.FullCalendarCSS + '/fullcalendar.css'}"
    scripts="{!join(',', 
    $Resource.FullCalendarJS + '/fullcalendar.js', 
    $Resource.jQuery + '/jquery.min.js',
    $Resource.MomentJS + '/moment.min.js')}"
    afterScriptsLoaded="{!c.scriptsLoaded}"/>
  <aura:attribute name="events" type="Events[]" />
  <div id="calendar"></div>
</aura:component>

Answer 1

You don't have to precise the name of the file if your static resource is only one file. You just have to do:

<aura:component controller="FullCalendarController" implements="force:appHostable">
  <ltng:require styles="{!$Resource.FullCalendarCSS}"
    scripts="{!join(',', 
    $Resource.FullCalendarJS, 
    $Resource.jQuery,
    $Resource.MomentJS)}"
    afterScriptsLoaded="{!c.scriptsLoaded}"/>
  <aura:attribute name="events" type="Events[]" />
  <div id="calendar"></div>
</aura:component>

Whereas, for example, if your static resource is a zip file containing multiple files, you will have to precise the name of the file you want after having loaded the resource.