[SalesForce] Intermittent 404 errors using Lightning Out in Visualforce

I'm seeing intermittent 404 errors when attempting to use lightning components inside a Visualforce page via Lightning Out, but one org seems far more affected than others.

The VF markup:

<apex:page standardController="AMS_Order__c" >

    <apex:includeLightning />
    <div id="lightning"/>

    <script>
        $Lightning.use("c:BGM_OB_OrderHeaderApp", function() {
            $Lightning.createComponent("c:BGM_OB_OrderHeaderContainer",
                  {orderId: "{!AMS_Order__c.Id}"},
                  "lightning"
            );
        });    
    </script>
</apex:page>

So pretty much as per the docs and has been working fine for several months now.

Since Winter 17, and particularly in one org, I get intermittent blank page results, and when I go to the JavaScript console I see the following error:

Failed to load resource:
https://bgm-dev-ed–c.eu3.visual.force.com/c/BGM_OB_OrderHeaderApp.app?aura.format=JSON&aura.formatAdapter=LIGHTNING_OUT
the server responded with a status of 404 (Not Found)

If I open that URL directly it works every time I try it. After I've loaded the app reference directly, the page then loads. I can also make the page load by disabling the cache and reloading 5-6 times.

Best Answer

  1. You have to set up an "aura:application".
  2. That aura:application needs to extend ltng:outApp
  3. The aura:application must use the component(s) as a dependency. This is key, otherwise you will see some odd behavior.
  4. Your error looks like you might be including an extra protocol (extra https://) somewhere in your code.
  5. You could also supposedly do this without an aura:application and use LC4VF (lightning components for VF) instead, but I haven't seen a working solution of this yet.

  6. Here's a working example of a VF page that includes 3 components (3 dependencies in the aura application): 

    <div id="sldsSpinner" />

<script>
    $Lightning.use("c:MyAuraApp", function() {
            $Lightning.createComponent(
                "c:MyComponent1",
                {},
                "formSelection"
            );
            $Lightning.createComponent(
                "c:MyComponent2",
                {},
                "objectSelection"
            );
            $Lightning.createComponent(
                "c:MyComponent3",
                {},
                "fieldSelection"
            );
        }
    );
</script>

Here's what my aura:application looks like:

<aura:application access="GLOBAL" extends="ltng:outApp">
    <aura:dependency resource="c:MyComponent1" />
    <aura:dependency resource="c:MyComponent2" />
    <aura:dependency resource="c:MyComponent3" />
</aura:application>
Related Topic