Is it possible to dynamically create LWC from aura component?

Question

We can't dynamically create LWC like aura does. We can embed LWC in aura, is it possible to dynamically create LWC using $A.createcomponent within aura component?

Answer 1

No. If you want to "dynamically" create an LWC you actually have to dynamically create an Aura component that statically wraps the LWC component.

Answer 2

Seems we were wrong... This code worked for me. The trick was to set true 'exposed' property in js-meta.xml

LWCContainerAction.cmp

<aura:component implements="force:LightningQuickAction, force:hasRecordId">
    <aura:handler name="init" value="{!this}" action="{!c.onInit}"/>
    {!v.body}
</aura:component>   

LWCContainerActionHelper.cmp

({
init : function(component) {
    const recordId = component.get('v.recordId');
    $A.createComponent(
        `c:lwcTest`, {recordId : recordId},
        function(lwcCmp, status, errorMessage) {
            if (status === "SUCCESS") {
                var body = component.get("v.body");
                body.push(lwcCmp);
                component.set("v.body", body);
            }
            else if (status === "INCOMPLETE") {
                console.log("No response from server or client is offline.");
            }
            else if (status === "ERROR") {
                console.error("Error: " + errorMessage);
            }
        }
      );
}
})

lwcTest.html

<template>
    test success
</template>

lwcTest.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    **<isExposed>true</isExposed>**
</LightningComponentBundle>

I have developed Aura Component wrapper for LWC specific for Lighting Actions. So now you can call LWC from Lighting Action with additional benefits.

Repo: https://github.com/SAItm/LWCAction

Answer 3

Currently creating LWC components dynamically that has exposed:false

I pass data from LWC via Messaging Channel in format

{
    name: "",
    action:  "",
    params: {};
}

Here is part of my helper method.

{
 createComponent: function(cmp, event) {

   const eventParams = event.getParams();

   if (eventParams.action !== 'open') {
     return;
   }

   const params = Object.assign({},
     eventParams.params,
     { 'aura:id': eventParams.id }
   );


   $A.createComponent(event.getParams().name,
     params,
     $A.getCallback(function(element, status, errorMessage) {
       try {
         if (status === "SUCCESS") {
           component.set('v.currentModal', element);
           const target = cmp.find('container');

           const body = target.get('v.body');

           body.push(element);
           target.set("v.body", body);
         }
       }
     }));
 }
}

I'm using this code to generate dynamic LWC modals