[SalesForce] Lightning components: Custom label translation not working in managed package

I'm developing a lightning component as part of managed package.

Translations work when I'm inside the development org, but I get only English values when using the component in my test org where I install the beta of my package.
In visualforce translations always work.
I'm using the standard lightning component syntax to access custom labels like below.

<lightning:button  label="{!$Label.namespace.myCustomLabel}" onclick="{!c.myFunction}"/>

Best Answer

My current workaround for this is to add a server side action (custom labels work in apex) that would return a map of all the custom labels used in the component and then set it as an attribute of type "Map". (You need to reference all custom labels anyway in order to include them in a managed package)

bottleneck: You have to make sure you load labels before doing anything else. If you have nested structure of your components and you load labels only once in the root component -> you have to manage loading of custom labels to insure the labels attribute is accessed only when it's populated.

Apex controller:

@AuraEnabled
public static Map<String,String> getCustomLabelMap(){
    Map<String,String> customLabelMap = new Map<String, String>();
    customLabelMap.put('MyCustomLabel1',Label.MyCustomLabel1);
    customLabelMap.put('MyCustomLabel2',Label.MyCustomLabel2);
    return customLabelMap;
}

Lightning Component:

<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:attribute name="LABEL" type="Map" access="private"/>

<lightning:button label="{!v.LABEL.MyCustomLabel1}" onclick="{!c.myFunction}" />

Lightning Component Controller:

({
    doInit: function (component, event, helper) {
        var action = component.get("c.getCustomLabelMap");
        action.setCallback(this, function (response) {
                var LABEL = response.getReturnValue();
                component.set("v.LABEL",LABEL);
        });
        $A.enqueueAction(action);
    },
    myFunction: function () {
        //myFunction
    }
})
Related Topic