Lightning Out Dependencies

Create a special Lightning dependency app to describe the component dependencies of a Lightning components app to be deployed using Lightning Out or Lightning Components for Visualforce.

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.

The mechanism for specifying dependencies is a Lightning dependency app. A dependency app is simply an <aura:application> with a few attributes, and the dependent components described using the <aura:dependency> tag. A Lightning dependency app isn’t one you’d ever actually deploy as an app for people to use directly. A Lightning dependency app is used only to specify the dependencies for Lightning Out. (Or for Lightning Components for Visualforce, which uses Lightning Out under the covers.)

A basic Lightning dependency app looks like the following.
<aura:application access="GLOBAL" extends="ltng:outApp"> 
    <aura:dependency resource="c:myAppComponent"/>
</aura:application>
A Lightning dependency app must do the following.
  • Set access control to GLOBAL.
  • Extend from either ltng:outApp or ltng:outAppUnstyled.
  • List as a dependency every component that is referenced in a call to $Lightning.createComponent().

In this example, <c:myAppComponent> is the top-level component for the Lightning components app you are planning to create on the origin server using $Lightning.createComponent(). Create a dependency for each different component you add to the page with $Lightning.createComponent().

Note

Note

Don’t worry about components used within the top-level component. The Lightning Component framework handles dependency resolution for child components.

Defining a Styling Dependency

You have two options for styling your Lightning Out apps: Salesforce Lightning Design System and unstyled. Lightning Design System styling is the default, and Lightning Out automatically includes the current version of the Lightning Design System onto the page that’s using Lightning Out. To omit Lightning Design System resources and take full control of your styles, perhaps to match the styling of the origin server, set your dependency app to extend from ltng:outAppUnstyled instead of ltng:outApp.

Usage Notes

A Lightning dependency app isn’t a normal Lightning app, and you shouldn’t treat it like one. Use it only to specify the dependencies for your Lightning Out app.

In particular, note the following.
  • You can’t add a template to a Lightning dependency app.
  • Content you add to the body of the Lightning dependency app won’t be rendered.