i am trying to insert Contact details using lightning cpmponent but it showing error. here is my code

Question

apex controller

public class lightningContactSave {
    @auraEnabled
       public static string save(string firstName, string lastName, string email, string phone){
        Contact con = new Contact();
        con.FirstName = firstName;
        con.LastName = lastName;
        con.Email = email;
        con.Phone = phone;
        insert con;
        return con.Id;
    }
}

component

<aura:component controller="lightningContactSave"  implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <aura:attribute type="string" name="firstName" default="Rogger "/>
    <aura:attribute type="string" name="lastName"/>
    <aura:attribute type="string" name="email"/>
    <aura:attribute type="string" name="phone"/>
    <table style="backgroud-color:white;">
        <tr>
            <td>First Name</td>
            <td><lightning:input aura:id="firstNameTxt" type="Text" name="txtFirstName" value="{!v.firstName}"/></td>
        </tr>
        <tr>
            <td>Last Name</td>
            <td><lightning:input aura:id="lastNameTxt" type="Text" name="txtLastName" value="{!v.lastName}"/></td>
        </tr>
        <tr>
            <td>Email</td>
            <td><lightning:input aura:id="emailTxt" type="Text" name="txtEmail" value="{!v.email}"/></td>
        </tr>
        <tr>
            <td>Phone</td>
            <td><lightning:input aura:id="phoneTxt" type="Text" name="txtPhone" value="{!v.phone}"/></td>
        </tr>
        <tr>
            <td></td>
            <td><lightning:button class="slds-button slds-button_outline-brand" 
                                  label="Save" title="Save" onclick="{!c.doSave }"/></td>
        </tr>
    </table>
</aura:component>

jscontroller

({

    doSave : function(component, event, helper){
        var action = component.get("c.save");
        action.setParams({
            firstName : component.get("v.firstName"),
            lastName : component.get("v.lastName"),
            email : component.get("v.email"),
            phone : component.get("v.phone")
        });

        action.setCallback(this, function(response){
            var state = response.getState();
            if(state === "SUCCESS"){
                var id = response.getReturnValue();
                var navEvt = $A.get("e.force:navigateToSObject");
                navEvt.setParams({
                    "recordId": id
                });
                navEvt.fire();
            }
            else if(state === "ERROR"){
                alert("Error"); 
            }
        });
        $A.enqueueAction(action);
    } 
})

Answer 1

The issue is not with the code but the way you are testing.

$A.get("e.force:navigateToSObject"); returns null when tested directly or by embedding the component in the application (.app) and clicking on preview etc. You can also do console.log('navEvt '+navEvt); and check the value retunred is null. And you are trying to set the params of null

navEvt.setParams({ "recordId": id });

$A.get("e.force:navigateToSObject"); fires an event and return object when invoked from Salesforce1/Lightning experience app. To test this, use an existing lightning experience app or create a new one and embed your component in the lighting page. Setup->Edit Page , drag your component and save it.