Static Resource fails to load on Child Component

Question

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

//ParentComponent
<aura:component extensible="true">
</aura:component>

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

//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?

Answer 1

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?

Answer 2

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()); }