Create and Navigate to an Account record Detail Page

Question

I am trying to create Lightning Code with will create an Account Record and navigate to its record detail page... However, I keep getting error as "Cannot Read property setParams of undefined"

Updated comp.cmp

<aura:dependency resource="markup://force:navigateToSObject" type="EVENT"/>

<aura:attribute name="myObj" type="Account" default="{'SObject':'Account'}"/>

<div class="slds-page-header">
    Account entry form...
</div>

<lightning:input type="text" name="accountName" label="Enter Account Name" value="{!v.myObj.Name}"/>
<lightning:input type="text" name="accountPhn" label="Enter Account Phone" value="{!v.myObj.Phone}"/>
<br/>
<lightning:button label="Save" onclick="{!c.saveAcc}"/>

<br/>
<!-- <c:comp2EventBased/> -->

Updated comp.js:

({ tstEvt : function(component, event, helper) { var evt = event.getParam("evt"); alert(":: Event Val :: "+evt); },

saveAcc : function(component, event, helper) {
    debugger;
    var obj = component.get("v.myObj");
    var action = component.get("c.createAcc");
    action.setParams({
        "myObj":obj
    });

    action.setCallback(this, function(acnt){            
        var state = action.getState(acnt);
        if (state == "SUCCESS") {
            var accID = acnt.getReturnValue();
            alert(":: Newly Created Account ID is :: "+accID);
            var navEvt = $A.get("e.force:navigateToSObject");
            navEvt.setParams({
                "recordId":accID,
                "slideDevName": "related"
            });
            navEvt.fire();
        }
    });        
    $A.enqueueAction(action);
}

})

saveAndReturnAcc.axpc:

public class saveAndReturnAcc {

    @AuraEnabled
    public static Id createAcc(Account myObj){

        insert myObj;
        return myObj.Id;

    }
}

Important to note that as soon as I remove the below redirection, it works fine:

var navLink = component.find("navLink");
                var pageRef = {
                    type: 'standard__recordPage',
                    attributes: {
                        actionName: 'view',
                        objectApiName: 'Account',
                        recordId : accID
                    }
                };
                navLink.navigate(pageRef);
            }

Stuck for a while here... Appreciate help.

Answer 1

Did you try to use "force:navigateToSObject":

createRecord : function (component, event, helper) {
    var navEvt = $A.get("e.force:navigateToSObject");
    navEvt.setParams({
      "recordId": "00QB0000000ybNX",
      "slideDevName": "related"
    });
    navEvt.fire();
}