I have the following parent component, child component, and static resource:

<aura:component extensible="true">

<aura:component extends="c:ParentComponent" implements="flexipage:availableForAllPageTypes">
    <ltng:require scripts="{!$Resource.Static_Resource}" afterScriptsLoaded=" {!c.afterScriptsLoaded}"/>

//ChildComponent Controller
    afterScriptsLoaded : function(component, event, helper) {
        var a = window.myStaticResource;

//Static Resource
window.myStaticResource = (function() {
    var a = 0;
    return a;

The static resource loads, and I can see it in my resource list, but the afterScriptsLoaded is never called. However, if I remove the extends="c:ParentComponent" from the Child Component, the afterScriptsLoaded is called. Is this a bug? Or is it not allowed for some reason?

2 Answers 2


I am not completely sure. But I thought the recommended practice was to use a client-side controller when using $Resource so that the client rendering is forced (since that resource is not available when markup is processed server-side. I will try it out later- but that may be the problem here?

  • Not sure what you mean - I am using $Resource. Commented Sep 29, 2018 at 9:46
  • Was referring to this - First, $Resource isn’t available until the Lightning Component framework is loaded on the client. Some very simple components that are composed of only markup can be rendered server-side, where $Resource isn’t available. To avoid this, when you create a new app, stub out a client-side controller to force components to be rendered on the client. Commented Sep 29, 2018 at 12:42

I don't think so it is a bug. I have used this approach in many lightning components. Also, the script will always get loaded irrespective of the fact if you are extending a parent component or not. The only thing that may be wrong is Static Resource Name or please consider the below JS code in your static resource file to achieve the same:

Lightning Component:

aura:attribute name="counter" type="Object" access="private"/>

--Declare a variable--

lightning:button label="Get Value" onclick="{!c.getValue}"/>

--Sample Button--

Static Resource window.Counter = function() {

var value = 0;

var increment = function() {
    value = value + 1;
    return value;

var getValue = function() {
    return value;

return { // public API
    increment: increment,
    getValue: getValue


Lightning Controller: afterScriptsLoaded : function(component, event, helper) { component.set("v.counter", new Counter()); }, getValue : function(component, event, helper) { var counter = component.get("v.counter"); console.log(counter.getValue()); }

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .