On click of next button I want to call another lightning component

Question

I have created one Lightning Component which contains a "Next" button.

//button code

lightning:button class="slds-button slds-button--brand" onclick="{!c.gotoURL}">Next /lightning:button>

Once I clicked on this next button I want to be called another component which is for creating new record.

I have written below function in controller.JS

//Calling a next component clicking on the "Next" button
gotoURL:function(component,event,helper){
    var evt = $A.get("e.force:navigateToComponent");      
    evt.setParams({
     componentDef:"NewOpportunityCreation",
    });

evt.fire();
}

But when I am clickin on the "Next" button I am getting below error message.

No COMPONENT named markup://NewOpportunityCreation found

STackTrace: org.auraframework.throwable.quickfix.DefinitionNotFoundException: No COMPONENT named markup://NewOpportunityCreation found

Answer 1

Instead of this componentDef:"NewOpportunityCreation" use componentDef:"c:NewOpportunityCreation"

Answer 2

You have one syntax error here

componentDef:"NewOpportunityCreation",

This line will be

componentDef:"c:NewOpportunityCreation" //you don't need the comma as well

You can navigate only to a component that’s marked access="global" or a component within the current namespace

Answer 3

({
next : function(cmp, event, helper) {
alert('1');
 var navService = cmp.find("navService");
 var pageReference = {
                     "type": "standard__component",
                     "attributes": {
                                     "componentName": "c__Questionary2"
                                   }, 
                     "state": {
                         'message':'This is the target page'
                     }
                    };
 navService.navigate(pageReference);
}
})