Open lightning component in new browser tab

Question

Can we open a lightning component in a new browser window or tab.

Basically I have a component where I open a component in a modal on click of a link. is it possible to open that component in new browser tab/window?

<b>{!v.userName}</b> Check on status by clicking <a class="link" onclick="{!c.modals}">here</a>.<br/>

opened modal :-

<aura:if isTrue="{!v.showModal}">
            <section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open slds-modal_large" 
                     aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1">
                <div class="slds-modal__container">
                    <header class="slds-modal__header">
                        <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate"><h4>{!v.notification.Name}</h4></h2>  
                    </header>
                    <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                        <div class="slds-wrap slds-m-around_medium">

                                <label><strong>Title</strong></label>
                                <div>{!v.notification.Name}</div>

                            <aura:if isTrue="{!v.notificationType =='Product Addition to Forecast'}">
                            <c:OP_BirthNotification/>
                                <aura:set attribute="else">    
                                <c:OP_clickNotification/> 
                                </aura:set>
                            </aura:if>
                        </div> 
                    </div>
                    <footer class="slds-modal__footer">
                        <button class="slds-button slds-button_neutral" onclick="{!c.closeModal}">Close</button>
                    </footer>
                </div>
            </section>
            <div class="slds-backdrop slds-backdrop_open"></div>
        </aura:if>

is That OP_clickNotification could be opened in new tab?

EDIT:- I have Tried to generate the URL but it just gives undefined in console. I took the same example as given in the salesforce documentation :-

The component:-

    <aura:component implements="force:hasRecordId,force:appHostable" 
                description="c:hello component">
    <aura:attribute name="pageReference" type="Object"/>
    <aura:handler name="init" value="{! this }" action="{! c.init }"/>
    <lightning:navigation aura:id="navService"/>
    <aura:attribute name="url" type="String"/>
    <lightning:button label="Navigate" onclick="{!c.handleClick}"/>
</aura:component>

Controller:-

init : function(component, event, helper) {
    var pageReference = {
        type: 'standard__component',
        attributes: {
            componentName: 'c__helloTarget',
        },
        state: {
            "c__firstname": "John"
        }
    };
    component.set("v.pageReference", pageReference);
 },
 handleClick: function(component, event, helper) {
     debugger;
    var navService = component.find("navService");
    var pageReference = component.get("v.pageReference");
    event.preventDefault();
    navService.generateUrl(pageReference)
        .then($A.getCallback(function(url) {
            component.set("v.url", url ? url : defaultUrl);
        }), $A.getCallback(function(error) {
            component.set("v.url", defaultUrl);
        }));
     var url = component.get("v.url");
     console.log(url);
}

Answer 1

Your component, the one you wish to open in a new window, needs to implement the lightning:isUrlAddressable interface. That will allow it to be targeted by a URL (that doesn't include an opaque encoded payload) and receive its state through URL parameters.

Then, your dispatching component will need to declare a <lightning:navigation> service component.

    <lightning:navigation aura:id="navService"/>

In your controller, you'll construct a page reference, which you can pass to the navService's public methods generateUrl() and navigate() to, respectively, obtain a URL to navigate to your other component or directly invoke the navigation. Your page reference will include

"type": "standard__component",
"attributes": {
    "componentName": "c__MyOtherComponent"   
},   

to define it as a reference to that component.

There are detailed examples available in the Lightning Component Library pages linked above, as well as in the Lightning Components Developer Guide.

Answer 2

As an option, you can make your Lightning Component acceptable for Lightning Tab. In aura you should implement interface "force:appHostable" In LWC you should include lightning__Tab into targets. Then create a Lightning Tab for that Component and open url for it in  a new browser tab by adding attribute target="_blank" to the url.

Answer 3

Here are two additional Quick Action Button Lightning Component solutions to either open a pop-up window or new browser tab with a Visualforce Page (or whatever URL you want to redirect to):

Lightning Component:

<aura:component implements="force:lightningQuickAction,force:hasRecordId" access="global">
    <aura:handler name="init" action="{!c.openPage}" value="{!this}" />
</aura:component>

Controller (to open pop-up window):

({
    openPage : function(component,event){
        var w = 1020;
        var h = screen.height-120;
        var left = (screen.width/2)-(w/2);
        var top = 0;
        var recordId = component.get('v.recordId');
        //Open Pop-up Window with Visualforce Page
        window.open('/apex/YOUR_VISUALFORCE_PAGE?id='+recordId, 'Sales Contract', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
        //Close Action Button Modal
        $A.get('e.force:closeQuickAction').fire();
    }
})

Controller (to open new browser tab):

({
    openPage : function(component,event){
        var recordId = component.get('v.recordId');
        //Open New Browser Tab with Visualforce Page
        window.open('/apex/YOUR_VISUALFORCE_PAGE?id='+recordId,'_blank');
        //Close Action Button Modal
        $A.get('e.force:closeQuickAction').fire();
    }
})