1

so I'm trying to embed a Lightning component into a Lightning Application - I have managed to do this however If I was to put this in the lightning component;-

<h1>Hello world</h1>

It will not display inside the lightning application anywhere. I am using a custom CSS and JS(using angularrJS) inside the component that loads but it will not load tags or text. Heres my code for the lightning component;-

<aura:component implements="flexipage:availableForAllPageTypes">
<ltng:require scripts="/resource/private_widget_javascript" />
<ltng:require styles="/resource/private_widget_css" />
<body>
  <h1>Hello world</h1>
  {{ 1 + 5 }}
</body>
</aura:component>

And here is my lightning application:

<aura:application access="GLOBAL" extends="ltng:outApp">
  <aura:dependency resource="ui:button" />
  <c:BB_test />
</aura:application>
1

Why are you extending ltng:outApp? That base application is specifically designed for use only with Lightning Out or Lightning Components for Visualforce and its renderer does not emit anything by design. The sole purpose for ltng:outApp is to allow you to specify one or more tags to tell the lightning framework about the set of components you want to use in an integration scenario.

Also, combining multiple frameworks is an advanced concept - especially 2 strongly opinionated full stack ones like Angularjs and Lightning. It's certainly possible (I use Ionic/Angular myself in a number of Lightning projects) but the complexity goes up, you need to know both frameworks well, risk of framework collisions and version incompatibilities increases, spin up performance can be an issue, etc. I have an open source project designed to make this easier you might want to take a look at https://github.com/forcedotcom/aura-ng

| improve this answer | |
0

extends="ltng:outApp" is use to show your lightning component in visualforce page. If you use ltng:outApp in Lightning application then it does not display any thing in the lightning Application. Simply remove the ltng:outApp from your lightning Application then its work fine.

<aura:application access="GLOBAL" >
  <aura:dependency resource="ui:button" />
  <c:BB_test />
</aura:application>

Thanks.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.