Not being able to navigate from one lightning component to another

Question

I have 3 components(I sincerely apologize for the extremely long code)

The main Component

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:handler event="c:NavigateToContactDetail" action="{!c.NavigateComponent}"/>
    {!v.body}
</aura:component>

The main component controller

({
    doInit : function(component, event, helper) {
    $A.createComponent(
    "c:MyLightComponent",
    {

    },
    function(newCmp){
        if (component.isValid()) {
        component.set("v.body", newCmp);
        }
    }
    );
    },

    NavigateComponent : function(component,event,helper) {          
    $A.createComponent(
    "c:ContactDetailsLightningComponent",
    {
        "contactId" : event.getParam("recordId")
    },
    function(newCmp){
        if (component.isValid()) {
        component.set("v.body", newCmp);
        }
    }
    );
    }
})

The first Component called MyLightComponent

<aura:component controller="contactSearch" implements="force:appHostable" >
    <aura:attribute access="public" name="maxResults" type="Integer" default="10" />
    <!--<aura:registerEvent name="contactsFoundEvent" type="c:ContactsFound"/>-->
    <aura:registerEvent name="navigate" type="c:NavigateToContactDetail"/>
    <aura:attribute name="contacts" type="Contact[]" />

    <div>
        <ui:inputText aura:Id="searchTerm" label="Contact Name" placeholder="Enter a Contact Name"></ui:inputText>
        <ui:button label="Search" press="{!c.search}"></ui:button>
    </div>


<ul>
<aura:iteration items="{!v.contacts}" var="contact" indexVar="index">
    <li class="minli"> 
            <h3>
                <a onclick="{!c.viewRecord}" style="width:100%;" data-index="{!index}">{!contact.Name}</a>
            </h3>
        </li>
    </aura:iteration>
</ul> 
</aura:component>

MyLightComponentController

({
    search : function(component, event, helper) {
        helper.helperSearch(component,event);
        console.log('helper');
    },
    viewRecord : function(component, event, helper) {
         var navEvent = $A.get("e.force:NavigateToContactDetail");
         var idx = event.target.getAttribute('data-index');
         var contact = component.get("v.contacts")[idx];
         if(navEvent){
             navEvent.setParams({
                  recordId: contact.Id,
             });
             navEvent.fire(); 
         }

    },
})

NavigateToContactDetail Event

<aura:event type="APPLICATION">

<aura:attribute name="recordId" type="Id"/>

</aura:event>

The second Component-ContactDetailsLightningComponent

<aura:component implements="force:appHostable">
    <aura:attribute name="contactId" type="Id" />
    The result is {!v.contactId}
</aura:component>

The first component is being rendered from the main component, However when I click on the name link, it is not going to the ContactDetailsLightningComponent. Please tell me where am I going wrong. I am extremely new to lightning. Please Help!!!

Answer 1

The event 'NavigateToContactDetail' is custom application event created by you, so in the 'viewRecord' method of the 'MyLightComponentController' while firing the 'NavigateToContactDetail' you should be using the namespace as 'c' and not 'force', that is

try changing the following line

var navEvent = $A.get("e.force:NavigateToContactDetail");

to

var navEvent = $A.get("e.c:NavigateToContactDetail");