Please help me with the Navigation component

Question

I am trying to call mobiles component from button click on this component , I am unable to call. please help me with this task.

I am not getting any error, the button is getting highlighted but nothing else is happening on the page , I am a novice don't know how to debug this.

({
    init : function(component, event, helper) {
        var pageReference = {
            type: 'standard__component',
            attributes: {
                componentName: 'c__mobiles'
            }
        };
        component.set("v.pageReference", pageReference);
     },
     handleClick: function(component, event, helper) {
        var navService = component.find("navService");
        var pageReference = component.get("v.pageReference");
        event.preventDefault();
        navService.navigate(pageReference);
    }
})

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction lightning:isUrlAddressable" 
                access="global" >

    <aura:attribute name = "AmazeKart" type = "string" default = "AmazeKart"/>
    <aura:attribute name = "Computers" type = "string" default = "Computers"/>
    <aura:attribute name = "Mobiles"   type = "string" default = "Mobiles"/>
    <aura:attribute name = "Watches"   type = "string" default = "Watches"/>
    <aura:attribute name = "Cart"      type = "string" default = "Cart"/>
    <aura:attribute name="pageReference" type="Object"/>
    <aura:handler name="init" value="{! this }" action="{! c.init }"/>
    <lightning:navigation aura:id="navService"/>
    <lightning:button label="mobiles" onclick="{!c.handleClick}"/>


    <lightning:layout class="slds-page-header slds-page-header--object-home">
        <lightning:layoutItem>
            <lightning:icon iconName="standard:scan_card" alternativeText="amazeKart"/>
        </lightning:layoutItem>
        <lightning:layoutItem padding="horizontal-small">
            <div class="page-section page-header">
                <h1 class="slds-text-heading--label">{!v.AmazeKart}</h1>

            </div>
        </lightning:layoutItem>
    </lightning:layout>

    <div class="slds-box slds-theme_shade slds-theme_alert-texture">
        <div class="slds-grid slds_align-center">

            <div class="slds-col slds-size_1-of-4">
                <span>
                    <div class="slds-box slds-box">
                        <p> <lightning:button label="Computers" class ="slds-m-top-medium" variant="brand"
                                              onclick="{!c.handleClick}"/></p>
                    </div>
                </span>
            </div>

            <div class="slds-col slds-size_1-of-4">
                <span>
                    <div class="slds-box slds-box">
                        <p><lightning:button label="Watches" class ="slds-m-top-medium" variant="brand"
                                             onclick="{!c.handleClick}"/></p>

                    </div>
                </span>
            </div>

            <div class="slds-col slds-size_1-of-4">
                <span>
                    <div class="slds-box slds-box">
                        <p>


                        </p>
                    </div>
                </span>
            </div>

            <div class="slds-col slds-size_1-of-6">
                <span>
                    <div class="slds-box slds-box">
                        <p><lightning:button label="Cart" class ="slds-m-top-medium" variant="brand"
                                             onclick="{!c.handleClick}"/></p>

                    </div>
                </span>
            </div>
        </div>
    </div>

</aura:component>

Answer 1

I was finally able to figure out navigation component doesn't work in developer console , but I was able to use on standard page.