Open LWC page from Salesforce aura component controller

Question

My requirement is open the LWC page from Aura component controller. So I did all the steps which mentioned in the link How to open LWC in a new page from Record Detail Aura Component but getting an error "This page isn't available in Salesforce Lightning Experience or mobile app."

My requirement is a little bit different- Open the LWC page in the same window without any tab. I am using the below code in Aura component controller.

createProactiveLWC : function(cmp,event,helper){
   var navService = cmp.find("navService");
        // Sets the route to /lightning/o/Account/home
        var pageReference = {
            type: 'standard__component',
            attributes: {
                componentName: 'c:proactiveLWCForm'//I tried with c__proactiveLWCForm and c__c:proactiveLWCForm
            },
            state : {
                c__recordId : cmp.get('v.recordId')
            }
        };

        // Set the URL on the link or use the default if there's an error
        var defaultUrl = "#";
        navService.generateUrl(pageReference).then($A.getCallback(function(url) {

        }));
}

Answer 1

URL addressable tabs are currently not supported for LWC components as documented in Unsupported Experiences and Tools

Also from Documentation:

To make an addressable Lightning web component, embed it in an Aura component that implements the lightning:isUrlAddressable interface.

So embed LWC component in Aura component and have navigation to that component - using isUrlAddressable interface.

Also, pls note that the URL parameters are accessable in LWC component directly. You need not pass them from Aura component.

import { LightningElement, track, wire } from 'lwc';
import { CurrentPageReference, NavigationMixin } from 'lightning/navigation';

export default class Poc extends NavigationMixin(LightningElement) {
    @wire(CurrentPageReference)
    setCurrentPageReference(currentPageReference) {
        this.currentPageReference = currentPageReference;
    }
    connectedCallback(){
        console.log("URL Parameters => ", this.currentPageReference.state);
    }
}

As shown above, use wire service to get the URL parameters (as state) in LWC component

Answer 2

I have found an interesting idea about how this can be implemented.

Put this code

<aura:handler name="init" value="{!this}" action="{!c.onInit}" /> 
<lightning:navigation aura:id="navService"/>

into auraComponent.html file and put this init handler into auraComponentController.js

onInit : function(cmp) {
    var navService = cmp.find("navService");
    var compDefinition = {
        componentDef: "c:proactiveLWCForm",
        attributes: {
            recordId: cmp.get('v.recordId'),
            objectApiName: cmp.get('v.sObjectName')
        }
    };
    // Base64 encode the compDefinition JS object
    var encodedCompDef = btoa(JSON.stringify(compDefinition));

    var pageReference = {
        type: 'standard__webPage',
        attributes: {
            url: '/one/one.app#' + encodedCompDef
        }
    }

    navService.navigate(pageReference);
}

Answer 3

So! my requirement was to open LWC in New Page from Quick Action. I tried many methods like

• LWC to LWC
• Button URL
• AURA to LWC

FOR LWC to LWC -- Some of the standard objects does not support LWC as Quick Action

After I tried, AURA to LWC, that works fine :)

AURA.cmp:

<aura:component
    implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction"
    access="global">

    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:attribute name="QuoteId" type="string" />

</aura:component>

AURA.JS(Controller):

({
    doInit: function (component, event, helper) {

        var rid = component.get("v.recordId");
        component.set('v.QuoteId', rid);
        let compDefinition = {
            componentDef: "c:LineEditorLWC",
            attributes: {
                recordId: rid
            }
        };
        // Base64 encode the compDefinition JS object
        let encodedCompDef = btoa(JSON.stringify(compDefinition));


        var urlEvent = $A.get("e.force:navigateToURL");
        urlEvent.setParams({
            "url": "/one/one.app#" + encodedCompDef
        });
        urlEvent.fire();
    }
})