COMPONENT
_____________
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" controller="accClass">
   <aura:attribute name="data" type="List"/>
    <aura:attribute name="columns" type="List"/>
    <aura:handler name="init" value="{! this }" action="{! c.doInit }"/>
    <aura:attribute name="id1" type="id" />
    <lightning:navigation aura:id="navigate"/>
    <aura:attribute name="truthy" type="Boolean" Default ="true"/>
   
    <table class="slds-table slds-table--bordered slds-table--cell-buffer">
    <thead>
        <tr class="slds-text-title--caps">
            <th scope="col">
                <div class="slds-truncate" title="Name">Name</div>
            </th>
            <th scope="col">
                <div class="slds-truncate" title="Id">Id</div>
            </th>
            <th scope="col">
                <div class="slds-truncate" title="AccountNumber">AccountNumber</div>
            </th>
        </tr>
    </thead>
    <tbody>
        <aura:iteration items="{!v.data}" var="ct">
            <tr>
                <th scope="row" data-label="First Name">
                    <div class="slds-truncate" title="{! ct.Name }">{! ct.Name }</div>
                </th>
                <td data-label="Last Name">
                    <div class="slds-truncate" title="{! ct.Id }">{! ct.Id }</div>
                </td>
                <td data-label="Email">
                    <div class="slds-truncate" title="{! ct.AccountNumber }">{! ct.AccountNumber }</div>
                </td>
                <td>
                <lightning:button name="{!ct.Id}" variant="brand" label="Related_Contacts"  onclick="{! c.showCon }" />
                </td>
            </tr>
        </aura:iteration>
    </tbody>
</table>
</aura:component>


CONTROLLER.JS
________________
({
    doInit : function(component, event, helper) 
    {
    var accRecord = component.get('c.sendAccount');
        accRecord.setParams({
            
        });
        accRecord.setCallback(this,function(response){
            var state = response.getState();
            if(state==='SUCCESS')
            {
                var response = response.getReturnValue();
                console.log(response);
                component.set("v.data" , response);
            }
        });
        $A.enqueueAction(accRecord);
    },

    showCon: function (component, event, helper) 
    {
        var recId = event.getSource().get('v.name');
   var relatedListEvent = $A.get("e.force:navigateToRelatedList"); 
        relatedListEvent.setParams({ "relatedListId": "contact", 
                                    "parentRecordId": recId }); 
        relatedListEvent.fire(); 
        }
    
    });After clicking the related contact button this error is shown

COMPONENT
_____________
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" controller="accClass">
   <aura:attribute name="data" type="List"/>
    <aura:attribute name="columns" type="List"/>
    <aura:handler name="init" value="{! this }" action="{! c.doInit }"/>
    <aura:attribute name="id1" type="id" />
    <lightning:navigation aura:id="navigate"/>
    <aura:attribute name="truthy" type="Boolean" Default ="true"/>
   
    <table class="slds-table slds-table--bordered slds-table--cell-buffer">
    <thead>
        <tr class="slds-text-title--caps">
            <th scope="col">
                <div class="slds-truncate" title="Name">Name</div>
            </th>
            <th scope="col">
                <div class="slds-truncate" title="Id">Id</div>
            </th>
            <th scope="col">
                <div class="slds-truncate" title="AccountNumber">AccountNumber</div>
            </th>
        </tr>
    </thead>
    <tbody>
        <aura:iteration items="{!v.data}" var="ct">
            <tr>
                <th scope="row" data-label="First Name">
                    <div class="slds-truncate" title="{! ct.Name }">{! ct.Name }</div>
                </th>
                <td data-label="Last Name">
                    <div class="slds-truncate" title="{! ct.Id }">{! ct.Id }</div>
                </td>
                <td data-label="Email">
                    <div class="slds-truncate" title="{! ct.AccountNumber }">{! ct.AccountNumber }</div>
                </td>
                <td>
                <lightning:button name="{!ct.Id}" variant="brand" label="Related_Contacts"  onclick="{! c.showCon }" />
                </td>
            </tr>
        </aura:iteration>
    </tbody>
</table>
</aura:component>


CONTROLLER.JS
________________
({
    doInit : function(component, event, helper) 
    {
    var accRecord = component.get('c.sendAccount');
        accRecord.setParams({
            
        });
        accRecord.setCallback(this,function(response){
            var state = response.getState();
            if(state==='SUCCESS')
            {
                var response = response.getReturnValue();
                console.log(response);
                component.set("v.data" , response);
            }
        });
        $A.enqueueAction(accRecord);
    },

    showCon: function (component, event, helper) 
    {
        var recId = event.getSource().get('v.name');
   var relatedListEvent = $A.get("e.force:navigateToRelatedList"); 
        relatedListEvent.setParams({ "relatedListId": "contact", 
                                    "parentRecordId": recId }); 
        relatedListEvent.fire(); 
        }
    
    });After clicking the related contact button this error is shown