Lightning Web Component in VF Page

Hello,

I am trying to create a custom lightning web component accessed via visualforce page, but there seems to be an error. Upon analyzing the code and testing, I found out that the recordId is null.

I believe the issue is that recordId is not transferred. Could you help? 

ABC.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:attribute name="recordId" type="Id" />
    <c:XYZ CardTitle="Create" recordId="{!v.recordId}" />
</aura:component>

- works fine (tested using object -> add button, action etc)

- XYZ component has no issues and is in javascript. It also opens /apex/Lightning_page?oid=recordId

Lightning App - ABCDE.app

<aura:application implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes" access="GLOBAL" extends="ltng:outApp">
    <aura:attribute name="recordId" type="Id" />
    <c:ABC recordId="{!v.recordId}"/>
</aura:application>

Lightning Web Component - AAA.vfp

<apex:page standardController="Opportunity">
    <apex:includeLightning />
    <apex:pageBlock >
        <apex:pageBlockSection >
        	<div id="newQ" />
    	</apex:pageBlockSection>
    </apex:pageBlock>
    <script>
    	$Lightning.use("c:ABC", function(){
        	$Lightning.createComponent(
            	"c:ABCDE", {
                    recordId : '{!$CurrentPage.parameters.id}',
                    console.log('regular access record ID: '+recordId);
                }, "newQ", function(cmp){
                	console.log('regular access record: ');
                }
            );
        });
    </script>
</apex:page>

Apex Page call

PageReference refe = new PageReference("/apex/AAA");

Only requirement of the js is recordId.

#Salesforce Developer #Lightning Web Components #Aura Lightning Components #Visualforce Pages #Apex Code