1

Getting this error when trying to run a lighning app (click on preview app) with extends="ltng:outApp" . This is to embed the component inside VFP.

Note - The error is not reproducable when the same lightning component is embedded in VFP and previewed. I believe this started happening after winter 16 release.

  • lightning is enabled in the org.

  • extends ltng:outApp is required to include this in a VF page.

    <aura:application access="GLOBAL" extends="ltng:outApp"> <!-- Define the Design System static resource (version 0.9.0) --> <c:scoryAppCard /> </aura:application>

VF page code that embed the above lightning component -

<!-- Include a JavaScript file in your Visualforce page -->
<apex:includeScript value="/lightning/lightning.out.js" />

<div id="lightning" />

<script>
//Tell your Visualforce page to use ExposeVF Lightning app
    $Lightning.use("c:scoryApp", function() {
        // Write a function that creates the component on the page
      $Lightning.createComponent("c:scoryAppCard",
      {},
      "lightning",
      function(cmp) {
        // do some stuff
      });
    });
</script>

``

Mohith Shrivastava
  • 91,131
  • 18
  • 158
  • 209
msreekm
  • 209
  • 1
  • 2

1 Answers1

1

I guess the behaviour is correct

<aura:application access="GLOBAL" extends="ltng:outApp">

This will not allow to be previewed .Its meant to just define dependencies and if you need to view those components you may need to just use the component inside the aura:app

<aura:application >
   <c:LightningSPA />
 </aura:application>

In your apex page you can now get rid of apex:includeScript and use simple tag 

<apex:includeLightning />
Mohith Shrivastava
  • 91,131
  • 18
  • 158
  • 209
  • I want to use this component in both VFP and lightning UI (app). how does that work if I remove the extends? – msreekm Jan 19 '16 at 21:27
  • You have to keep them separated !Thats the only alternative currently .Have two separate apps there .Hope that makes sense – Mohith Shrivastava Jan 19 '16 at 21:28
  • @msreekm : btw.. a better way to embed components is to use <aura:dependency /> rather than <c:componentName /> as aura:dependency tracks all the dependecies required to run your ltng:outApp. And you will have to use 2 apps for your scenario. – Sumuga Nov 10 '16 at 04:36