[SalesForce] Error in $A.getCallback() [Cannot read property ‘setParams’ of undefined]. while using e.force:navigateToComponent

Component1.cmp

<aura:component implements="force:appHostable" controller="AccountContactClass">
 <aura:attribute name="acc" type="Account"/> 

    <aura:attribute name="conDetails" type="contact[]"/> 
    <div class="container">
    <form class="slds-form--stacked">

        <div class="slds-form-element slds-is-required">
        <div class="slds-form-element__control">

          <ui:inputText aura:id="selectedAccount" label="Account Name"
                        class="slds-input--small"
                        labelClass="slds-form-element__label"
                        value="{!v.acc}"
                        required="true"/>

         </div>
       </div>

        <div class="slds-form-element">

             <button type="button" onclick="{!c.navigateToMyComponent}">Search</button> 

           </div>

    </form>
  </div><!-- ./container-->

</aura:component>

Component2.cmp

({
   navigateToMyComponent : function(component, event) {
    var action = component.get("c.getLstAccounts");
    var selectedAccount = component.find('selectedAccount').get("v.value");    
    action.setParams({
        "accountname" : selectedAccount
    });

       action.setCallback(this, function(response) {
             var state = response.getState();

            if(state === "SUCCESS") {
                alert('success');
                component.set("v.conDetails", response.getReturnValue());
            //  alert('check'+ JSON.stringify(component.get("v.conDetails")));
                alert(component.get("v.conDetails"));
                var evt = $A.get("e.force:navigateToComponent");

        evt.setParams({
            componentDef : "c:myComponenttest",
            componentAttributes: {
                objName     : component.get("v.conDetails"),
                Show_Result : selectedAccount
            }
        });
        evt.fire(); 
            }

            else {
                console.log("error");
            }
        });
        $A.enqueueAction(action);
    }
})

myComponenttest.cmp

<aura:component>
    <aura:attribute name="Show_Result" type="String" /> 
    <aura:attribute name="objName" type="contact[]" />

    <table class="slds-table slds-table--bordered slds-max-medium-table--stacked-horizontal">
        <tr class="slds-text-heading--label">
            <th scope="col">
                <span class="slds-truncate">Name</span>
            </th>

        </tr>
        <tbody>
            <aura:iteration items="{!v.objName}" var="obj">
                <tr class="slds-hint-parent">
                    &nbsp; &nbsp;
                    <td data-label="Name">
                            <ui:outputText value="{!obj.Name}" />
                    </td>
                </tr>
                <tr class="stop"> </tr>

            </aura:iteration>
        </tbody>
    </table>

</aura:component>

Best Answer

You can declare that your component can fire such event by adding this code in the XML part of your component

    <aura:registerevent name="forceNavig2Component" type="force:navigateToComponent"/>
Related Topic