How to redirect FROM a record page TO a LWC through quick action?

Question

Most questions I've seen are for redirecting FROM lwc to another page. I need the other way around. I am in the record page and I want to click a quick action button and take me to a page where I display an LWC. I've been successful in displaying the LWC inside an Aura component (as a pop-up inside the record page) but this is not desirable.

I've been able to generate a URL

lightning/cmp/c__myLWC?c__recordId=XXXXXXXXXXXXXXXX

When the redirect happens and opens a new browser tab, salesforce gives me:

This page isn't available in Salesforce Lightning Experience or mobile app.

I have created a custom tab for Lightning Component and specified the Aura component for it.

Has anyone encountered a similar problem and would like to share a solution ??

Many thanks in advance.

Aura component connected to the quick action button

    <aura:component
  implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction"
>
  <aura:attribute name="url" type="String" />
  <aura:attribute name="pageReference" type="Object" />
  <aura:handler name="init" value="{! this }" action="{! c.doInit }" />
  <lightning:navigation aura:id="navService" />
</aura:component>

Aura controller

({
    doInit : function(cmp, event, helper) {
    var navService = cmp.find("navService");
    var pageReference = {
      type: 'standard__component',
      attributes: {
        componentName: 'c__myLWC'
      },
      state:{
        c__recordId: cmp.get('v.recordId')
      }
    }

    var defaultUrl = '#'
    navService.generateUrl(pageReference).then($A.getCallback(function(url){
      window.open(url, '_blank');
    }));
  }
})

myLWC.html

<template>
  <div class="slds-box slds-p-around_none slds-m-top_x-small slds-m-bottom_medium slds-m-horizontal_none">
    <template if:false={jsonFile}>
      No Data
    </template>
    <template if:true={jsonFile}>
      <lightning-card title={jsonFile.title} icon-name="custom:custom3">
        <lightning-button-icon icon-name="utility:save" onclick={saveJson} alternative-text="Save" slot="actions" size="medium" class="slds-button_icon slds-size_medium"></lightning-button-icon>
        <div class="slds-m-around_medium">
          <template for:each={jsonFile.steps} for:item="step">
            <lightning-card key={step.stepID} title={step.stepID} class="block-inline slds-card_boundary">
              <lightning-button-icon id={step.stepID} icon-name="utility:edit" onclick={renderStep} alternative-text="Edit" slot="actions" size="x-small" class="slds-button_icon slds-size_x-small"></lightning-button-icon>
              <lightning-button-icon id={step.stepID} icon-name="utility:delete" onclick={deleteStep} alternative-text="Delete" slot="actions" size="x-small" class="slds-button_icon slds-size_x-small"></lightning-button-icon>
              <div class="slds-card__body slds-card__body_inner">{step.title}</div>
            </lightning-card>
            <lightning-icon key={step.stepID} icon-name="utility:forward" alternative-text="Forward image" ></lightning-icon>
          </template>
          <lightning-button-icon icon-name="utility:add" onclick={addStep} alternative-text="New" class="slds-button_icon slds-size_large"></lightning-button-icon>
        </div>
      </lightning-card>

      <template for:each={jsonFile.steps} for:item='step' for:index='index'>
        <c-b2c-step-cmp key={step.stepID} step-id={step.stepID} title={step.title} section={step.sections} step-id-click={stepIdClicked}></c-b2c-step-cmp>
      </template>
    </template>
  </div>
</template>

myLWC.js

In this component I have some business logic ommited for obvious reasons but the jist is that the whole component doesn't show.

import { LightningElement, track, wire, api } from "lwc";
import { NavigationMixin, CurrentPageReference } from "lightning/navigation";
import { getRecord, updateRecord } from "lightning/uiRecordApi";
import { ShowToastEvent } from "lightning/platformShowToastEvent";


export default class myLWC extends NavigationMixin(LightningElement) {
  @track data;
  @api recordId;

  @wire(getRecord, {
    recordId: "$recordId"
  })
  wiredRecord({ error, data }) {
    if (error) {
      let message = "Unknown error";
      if (Array.isArray(error.body)) {
        message = error.body.map(e => e.message).join(", ");
      } else if (typeof error.body.message === "string") {
        message = error.body.message;
      }
      this.dispatchEvent(
        new ShowToastEvent({
          title: "Error loading Promo Configuration",
          message,
          variant: "error"
        })
      );
    } else if (data) {
      this.data= data;
    }
  }

  @wire(CurrentPageReference)
  currentPageReference;

  get recordIdFromState() {
    return (
      this.currentPageReference && this.currentPageReference.state.c__recordId
    )
  }
}

Answer 1

You could embed your LWC in a Visualforcepage, and create a VF action instead. For doing so you'd have to embed your LWC in an aura:app —instead of an aura:component.

Here's a pseudo-code —you may need to adjust it: The Aura app (myAuraApp)

<aura:application access="GLOBAL" extends="ltng:outApp">
    <aura:dependency resource="c:myLWC"/> <!-- Not sure if the "c:" part is needed here -->
</aura:application>

**The VF page ** (Note: for standardController use the object you want the action for. Eg: "Account", "YourCustomObject__c")

<apex:page lightningStylesheets="true" standardController="ObjectName">
    <apex:includeLightning />
    <div id="lightning" />
    <script>
        $Lightning.use("c:myAuraApp", function() {
             $Lightning.createComponent("c:myLWC", {
                   recordId: "{!ObjectName.Id}"
                 },
              "lightning",
              function(cmp) {
                console.log("LWC component rendered");
              }
          );
        });
    </script>
</apex:page>

Anyway, try this out and let me know how it goes :)