Lightning component event not fired or handled

Question

To build a nested component structure as detailed here I have build the solution described in one of the answers which recommended to send an APPLICATION event...

parentInitialized.evt

<aura:event type="APPLICATION">
    <aura:attribute name="data" type="Object" />
</aura:event>

from the parent component

parent.cmp

<aura:component >
    <aura:attribute name="children" type="Object[]" default="[]" />

    <aura:registerEvent name="parentInitialized" type="c:parentInitialized" />

    <aura:handler name="init" value="{!this}" action="{!c.init}" />
    <aura:handler name="childInitialized" event="c:childInitialized" action="{!c.registerStep}"/>   
</aura:component>

parentController.js

({
    init: function(component, event, helper) {
        var evt = $A.get("e.c:parentInitialized");
        evt.fire();
    },

    //FAILS HERE: child component events are never handled here
    registerStep: function(component, event, helper) {
        var children = component.get("v.children");
        children.push({ "data": event.getParam("data")});
        component.set("v.children", children);
    }
})

...to tell the nested child components to register themselves using a bubbling COMPONENT event

childInitialized.evt

<aura:event type="COMPONENT">
    <aura:attribute name="data" type="Object" />
</aura:event>

child.cmp

<aura:component >
    <aura:attribute name="position" type="Integer" required="true" />
    <aura:attribute name="title" type="String" required="true" />

    <aura:registerEvent name="childInitialized" type="c:childInitialized" /> 

    <aura:handler event="c:parentInitialized" action="{!c.registerWithParent}"/>
</aura:component>

childController.js

({
    registerWithParent: function(component, event, helper) {
        var evt = component.getEvent("childInitialized");
        evt.setParams({
            "data": component.get("v.position")
        });
        evt.fire();
    }
})

But this never happens. The parent sends the Application event which is received by a child components. The also fire their component event. At least I see no errors.

But it is never received by parentController.js registerWithParent() method. Why??

Note: The Lightning Inspector didn't run for strange reasons on this page in my Chrome so I could not see if the events where fired and just not handled or not even fired

Answer 1

When you use the pattern of:

<c:parent>
   <c:child name="xyz" />
</c:parent>

Then you must use includeFacets="true" to make a component event from the child bubble to the parent in the way you think it would in a DOM i.e.

<aura:handler name="childInitialized" event="c:childInitialized" action="{!c.registerStep}" includeFacets="true"/>

This worked for me with component events, but Robert informs me that to make it work with his application event, he also required phase="bubble" i.e.

<aura:handler name="childInitialized" event="c:childInitialized" action="{!c.registerStep}" includeFacets="true" phase="bubble"/>

See https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/events_component_bubbling.htm

This cost me a lot of time a few weeks ago! Grr!