Why {!$Label.c.myLabelName} is not working in lightning component added to VisualForce page?

I’m trying to use custom labels in my lightning component project. The problem is {$Label.c.myLabelName} is not showing anything on one environment and is showing “[c.myLabelName]” string on the other. I also cannot retrieve labels with A$.get(“$Label.c.myLabelName”) in my init event handler, but it works when I call it later.
What is going on here? Is that a bug? Does anybody know a good workaround?


This is my code works fine in developer org


<aura:component >
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="customlabl" type="String"/>
    hello : {!v.customlabl}


    doInit : function(component, event, helper) {

Update: As mentioned in your comment, this could very well be a bug!!!

1) The value of the label is not being set/ rendered on the VF
page for some reason.

2) The aura app preview is breaking / not showing any output when I extend the app using extends="ltng:outApp"

The only other workaround I can think of to handle label is to set the value of the label in the component controller through the VF page.

Modified App:

<aura:application access="GLOBAL" extends="ltng:outApp">
 <aura:dependency resource="prao6308:lcvfTestcomponent"/>

Modified component:

<aura:component >
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="customlabl" type="String"/>
    <aura:attribute name="customlablfromvf" type="String"/>
    <h1>Hello my value is set by  lightning controller: {!v.customlabl}</h1>
    <h1>Hello my value is set by  Visualforce page: {!v.customlablfromvf}</h1>    

Component controller ( same as above) :

    doInit : function(component, event, helper) {

VF Page:

I got an idea on setting attribute value based on blog by Peter Knolle and forcewizard’s blog



( Look for Adding the Component to a Visualforce Page)

VF Page:

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

    <div id="lightning" />
    //Tell your Visualforce page to use ExposeVF Lightning app
        $Lightning.use("prao6308:lcvfTest", function() {
            // Write a function that creates the component on the page
          function(cmp) {


VF Page Output:
enter image description here

Source : Link , Question Author : maciek , Answer Author : Rao

Leave a Comment