[SalesForce] Lightning components not added as dependency in lightning out app are visible to external app

I'm working on lightning out app to authenticate and expose few lightning components for an external node app. OAuth Access Token is used to authenticate user. It seems to be working fine just that components which aren't added to lightning out app as dependency are still available for creation in node app. Not sure, if this is expected behavior.

For ex.
Lightning out app code:

<aura:application access="GLOBAL" extends="ltng:outApp">
  <aura:dependency resource="c:HPE_TestUI_Cmp" type="COMPONENT" />
  <aura:dependency resource="c:ContactList" type="COMPONENT" />
  <aura:dependency resource="lightning:listView" type="COMPONENT" />
</aura:application>

Node Js Code:

<script>
var access_token = "<%= access_token %>";
console.log("​access_token", access_token);
$Lightning.use("c:HPE_TestLightningOutApp", // name of the Lightning app
    function () { // Callback once framework and app loaded
        console.log("​'came here'", 'came here');
        $Lightning.createComponent(
            "c:HPE_TestUI_Cmp", // top-level component of your app
            {}, // attributes to set on the component when created
            "lightningLocator", // the DOM location to insert the component
            function (cmp) {}
        );
        $Lightning.createComponent(
            "lightning:listView", // top-level component of your app
            {
                "aura:id": "findableAuraId",
                "objectApiName": "Case",
                "listName": "AllOpenCases"
            }, // attributes to set on the component when created
            "NewCaseSection", // the DOM location to insert the component
            function (cmp) {
                // callback when component is created and active on the page
                //alert('Lightning Out App has loaded!');
            }
        );
        $Lightning.createComponent(
            "c:ContactList", // top-level component of your app
            {}, // attributes to set on the component when created
            "ContactSection", // the DOM location to insert the component
            function (cmp) {
                // callback when component is created and active on the page
                // alert('Lightning Out App has loaded!');
            }
        );
        $Lightning.createComponent(
            "c:SkipLoginFlow_Cmp", // top-level component of your app
            {}, // attributes to set on the component when created
            "LoginFlowSection", // the DOM location to insert the component
            function (cmp) {
                // callback when component is created and active on the page
                alert('Lightning Out App has loaded!');
            }
        );
    },
    'https://caphpe01-capg-hpe.cs21.force.com', // Community endpoint
    access_token
);
console.log('done');
</script>

All components listed in node js script are getting created and shown properly on node app UI even if these components aren't added as dependency in ltng out app. Is this an expected behavior or I am missing something.

Best Answer

Adding aura:dependency is good practice but not required. As written in salesforce docs :-

When a Lightning components app is initialized using Lightning Out, Lightning Out loads the definitions for the components in the app. To do this efficiently, Lightning Out requires you to specify the component dependencies in advance, so that the definitions can be loaded once, at startup time.

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/lightning_out_dependencies.htm

So dependency is used to load definition of dynamically created component in advance only.

The tag enables you to declare dependencies, which improves their discoverability by the framework. The framework automatically tracks dependencies between definitions, such as components, defined in markup. This enables the framework to send the definitions to the browser. However, if a component’s JavaScript code dynamically instantiates another component or fires an event that isn’t directly referenced in the component’s markup, use in the component’s markup to explicitly tell the framework about the dependency.

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/ref_tag_dependency.htm

Related Topic