+ Start a Discussion
Aakanksha Singh 11Aakanksha Singh 11 

force:navigateToComponent is not working

Hello Everyone,

I'm trying to use force:navigateToComponent, but its not working. Here is my code:
<pre>
({
    NavigatetoComp : function(component, event, helper) {
        
        console.log('Enter Here');
        var evt = $A.get("e.force:navigateToComponent");
        console.log('evt'+evt);
        evt.setParams({
            componentDef: "c:MyComponent2",
            //componentAttributes :{ }
        });
       
        evt.fire();
    }
})
</pre>

It throws following error:
User-added image

Can any body tell why is it so?

Thanks In Advance
Aakanksha Singh
Best Answer chosen by Aakanksha Singh 11
{!Piyush_soni__c}{!Piyush_soni__c}
hi Aakanksha Singh 
maybe you are try it with lightning app.app, its support only with salesforce1 or Lightning Experience.
so add your component to the salesforce1 or Lightning Experience.tab
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_add_cmp_lex.htm
and then try this again
thanks let me inform if it helps you 
http://sfdcmonkey.com

All Answers

NagendraNagendra (Salesforce Developers) 
Hi Akanksha,

According to the Lightning Components Developer Guide(https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/ref_force_navigateToComponent.htm), this functionality requires that the target component's access attribute be set to "global". It also notes that it is only available in Lightning Experience and Salesforce1.

May I request you to please confirm where exactly you are trying to navigate the above component so that we can understand better and do the needful accordingly.

Regards,
Nagendra.
Aakanksha Singh 11Aakanksha Singh 11

Hello,

I was trying the code metioned in the blog(link is mentioned below), and it is throwing the above mentioned error.

https://force-base.com/2016/11/06/lightning-components-navigation-re-defined-in-winter17-woooo-hooooo/

Please go through it.

Regards
Aakanksha Singh

{!Piyush_soni__c}{!Piyush_soni__c}
hi Aakanksha Singh 
maybe you are try it with lightning app.app, its support only with salesforce1 or Lightning Experience.
so add your component to the salesforce1 or Lightning Experience.tab
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_add_cmp_lex.htm
and then try this again
thanks let me inform if it helps you 
http://sfdcmonkey.com
This was selected as the best answer
Aakanksha Singh 11Aakanksha Singh 11
Hello,
Its still not working.
Thanks
Aakanksha Singh 11Aakanksha Singh 11

Thanks to everyone, there was some issue in namin g conventions, which I have resolved myself :)

Andrew EAndrew E
Hey Aakangksha can you update on what you did? I am facing the same error as you.
Aakanksha Singh 11Aakanksha Singh 11
Hi Andrew,

Hope this hepls..

<pre>
Navigate : function(component,event,helper){
        var evt = $A.get("e.force:navigateToComponent");
        evt.setParams({
            componentDef: "c:MyComponent"
            //componentAttributes :{ }
        });       
        evt.fire();
    },
</pre>

Thanks
Aakanksha Singh
Aakanksha Singh 11Aakanksha Singh 11
*helps
{!Piyush_soni__c}{!Piyush_soni__c}
hi Aakanksha Singh, You have good knowledge about lightning, so if you want become contributor on sfdcmonkey.com then contact me on sfdcmonkey@gmail.com
Thanks :)
Umang SinghalUmang Singhal
check the below link which has complete working code.
https://umangsinghal.wordpress.com/2017/06/11/move-selected-table-values-from-one-component-to-another
David Roberts 4David Roberts 4
Thanks to all for the above.
I typically use "Harness.app" for development of components but it doesn't work with "navigateToComponent" because of the 'one.app' restriction.
So I created a lightning component bundle, "HarnessTester", which I added as a Tab.

<aura:component  access="global" implements="force:appHostable,force:hasRecordId,flexipage:availableForAllPageTypes">   
   <c:componentToTest recordId="00U8E000002o203UAA"/> 
</aura:component>

Works a treat!
David Roberts 4David Roberts 4
e.force:navigateToComponent has been deprecated.
You should now use a navigation service.
Examples at:
https://gist.github.com/sumugapadman/1afff802eef089c38f0ed233ae0c508d
(Thanks to Sumuga Padman, Developer Support team, Salesforce.com for that one)
see also:
https://developer.salesforce.com/docs/atlas.en-us.api_console.meta/api_console/components_navigation.htm
http://bobbuzzard.blogspot.com/2018/05/lightning-component-navigation-in.html
https://rajvakati.com/2018/05/29/navigation-in-lightning-experience-using-pagereference/

And below is my test version where I send a parameter to the second (receiving) component.
David Roberts 4David Roberts 4
Sender Component Bundle:

Sender.cmp
<aura:component implements="force:appHostable,force:hasRecordId,flexipage:availableForAllPageTypes"
                controller="EventRelatedContactsListController"
                access="global">
   
    <aura:attribute name="SendMessage" type="String" default = "Send reinforcements - we're going to advance."/>

    <lightning:navigation aura:id="launchComponent"/>
    <lightning:button variant="brand" label="Launch a component" onclick="{!c.launchComponent}" ></lightning:button>    
    
</aura:component>

SenderController.js
({
    launchComponent : function (component, event, helper){
        helper.hlpLaunchComponent(component,event);
    }
})

SenderHelper.js
({
    hlpLaunchComponent: function(cmp,event){
        var navService = cmp.find("launchComponent");
        console.log(navService);  
        console.log(cmp.get("v.SendMessage")); 
        var pageReference = {
            "type": "standard__component",
            "attributes": {
                "componentName": "c__Receiver"               
            },
            "state": {
                "c__receivedMessage" : cmp.get("v.SendMessage")
            }
        };
               
        console.log('navTo: '+ pageReference);
        event.preventDefault();
        navService.navigate(pageReference);

    }//hlpLaunchComponent

})

Receiver Bundle:

Receiver.cmp
<aura:component implements="lightning:isUrlAddressable,force:appHostable,force:hasRecordId,flexipage:availableForAllPageTypes" access="global">
    
    <aura:attribute name="receivedMessage" type="String"/>    
    <aura:handler name="init" value="{!this}" action="{!c.init}" />
    received: {!v.receivedMessage}
    
</aura:component>

ReceiverController.js
({
    init: function(cmp, event, helper) {
        var pageReference = cmp.get("v.pageReference");
        console.log('receiver...');
        cmp.set("v.receivedMessage", pageReference.state.c__receivedMessage);
        
    }//init
})