[SalesForce] Unable to open another Lightning Component in a Modal pop-up when called from within a Lightning app

Here is my first Component called Modal:

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

    <lightning:overlayLibrary aura:id="cmp1" />  

    <div class="slds-col slds-size_1-of-1">
        <lightning:button label="Open Modal" title="Open Modal" onclick="{!c.openAnotherComponent}"/>        
    </div>

</aura:component>

Controller for Modal Component looks like this:

({  
    openAnotherComponent: function(component, event, helper) {
        $A.createComponent("c:OpenModal", {},
        function(content, status) {
            if (status === "SUCCESS") {
                component.find('cmp1').showCustomModal({
                    body: content,
                    showCloseButton: false,
                    showCloseButton: true,
                })
            }
        });   
    }
})

My second component which I want to open in a modal pop-up is called OpenModal and here is the code:

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

    <lightning:overlayLibrary aura:id="cmp1" /> 

    <p class="headerDiv">
        Welcome to Modal Box
    </p>
</aura:component>

Controller for OpenModal:

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

    }
})

This code works if Modal component is placed inside a Lightning page. However, if I place it within an app as shown below it errors out.

My App code is as follows:

<aura:application  extends="force:slds">
    <c:Modal/>
</aura:application>

Here is the error I encounter only if called from an app but not from a lightning page:

This page has an error. You might just need to refresh it. [Cannot
read property 'ja' of undefined]

Best Answer

lightning:overlayLibrary is not supposed to work in standalone Lighting App and thus you are getting that error.

If you refer to the documentation, the Experience section highlights all areas where a component can be utilized. So unless that specifies standalone Lightning App (as is the case with this specific component), that component is not supposed to work there.

Below is a screenshot just for comparison from the documentation to show which component works in which Experience.

For lightning:overlayLibrary, which is not supported in app:

enter image description here

For lightning:accordion, which is supported in app: enter image description here

Related Topic