function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
VSK98VSK98 

Getting Aura.loadComponent(): Failed to initialize application. error

Hi All,

I have created the Single Page with Input text, Button & Output text field. The user enters some value in a text box after clicking on the button the output shows in below. But I am getting an error. Pls find the snippet code below
  
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    
 <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
   	<div class="row">
        <h2 class="header">Basic Input Text</h2>
        <lightning:input aura:id="text" name="input1" label="Enter some text" />
        <!-- Brand variant: Identifies the primary action in a group of buttons -->
    <lightning:button variant="brand" label="Brand action" title="Brand action" onclick="{! c.handleClick }" />
    </div>
    You entered: <ui:outputText aura:id="ou"/>	
    
</aura:component>

JS Controller:
  
({
    doInit  : function(component, event, helper) {
    
    
    
},
	handleClick  : function(component, event, helper) {
        var ip = component.find("text");
        var op = ip.get("v.value");
        alert(op);
        var ot = component.find("ou");
        	ot.set("v.value",op);
		
    
	}
    
    
})

Error:


Error

Pls help me on this.

Adv Thanks,
VSK98
Best Answer chosen by VSK98
Deepak GulianDeepak Gulian

You need to specify the "VALUE" attribute in ui:outputText tag like below.

<ui:outputText aura:id="ou" value="" />

All Answers

Kuldeep Singh 102Kuldeep Singh 102
hi VSK98,

Please find the correct code below :-

<aura:component implements="force:appHostable" access="global" >
    <aura:attribute name="TestValue" type="String" default=""/>  
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <div class="row">
        <h2 class="header">Basic Input Text</h2>
        <lightning:input aura:id="text" name="input1" label="Enter some text" value="{!v.TestValue}"/>
        <!-- Brand variant: Identifies the primary action in a group of buttons -->
        <lightning:button variant="brand" label="Brand action" title="Brand action" onclick="{! c.handleClick }" />
    </div>

    <lightning:input aura:id="ou" 
                     label="You entered:" 
                     />
</aura:component>



({
    doInit  : function(component, event, helper) {

        
    },
    handleClick  : function(component, event, helper) {
        var ip = component.find("text");
        var op = ip.get("v.value");
        alert(op);
        var ot = component.find("ou");
        ot.set("v.value",op);

    }

})




You were making mistake in "<ui:outputText aura:id="ou"/> " line.

Kindly mark my solution as the best answer if it helps you.


Regards,
Kuldeep Singh
Deepak GulianDeepak Gulian

You need to specify the "VALUE" attribute in ui:outputText tag like below.

<ui:outputText aura:id="ou" value="" />
This was selected as the best answer
Akshay_DhimanAkshay_Dhiman

Hi VSK98

//Component
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
 

<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <div class="row">
        <h2 class="header">Basic Input Text</h2>
        <lightning:input aura:id="text" name="input1" label="Enter some text" />
        <!-- Brand variant: Identifies the primary action in a group of buttons -->
        <lightning:button variant="brand" label="Brand action" title="Brand action" onclick="{! c.handleClick }" />
    </div>
            <lightning:outputField fieldName="Text_Area__c" aura:id="ou" />

</aura:component>

//Controller
        ({
    doInit  : function(component, event, helper) {
    
    
    
},
 handleClick  : function(component, event, helper) {
        var ip = component.find("text");
        var op = ip.get("v.value");
        alert(op);
        var ot = component.find("ou");
         ot.set("v.value",op);
  
    
 }
    
    
})


//AplicATION
<aura:application  extends="force:slds"  implements="force:appHostable,ltng:allowGuestAccess" access="global" description="Employee Portal App">


    <c:TestComponent/>



</aura:application>
 



Note:  <lightning:outputField fieldName="Text_Area__c" aura:id="ou" /> usse the component


If this answer is helpful for you please choose the best answer.

Thanks

Akshay
Shruti SShruti S

+1 In addition to the other answers, I would like add some more detail. Lightning Components is all about building components that are data driven. In others words, pretty much like other popular front end frameworks(Angular, React etc), the UI mutates or responds to the changes or alterations in the data that the specific element or node is bound to.

In this example, you will not really require any button to actually capture the entered Text and then show it on another place. You could use aura:attribute to capture the value that the User enters and display the value within the aura:attribute on another place. In other words, if this aura:attribute that holds the content in the Text Box is changed, the Lightning Framework automatically does a dirty-checking and updates all the sections of the page or component that uses this attribute to display the new value.

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <aura:attribute name="userName" type="String" access="private"/>
    
    <div class="slds-p-around_small">
        <lightning:input name="userName" label="Please Tell Us Your Name:" value="{!v.userName}"/>
        
        <br/>
        
        <span>Your Name is: {!v.userName}</span>
    </div>
</aura:component>
User-added image
Varun Gupta 85Varun Gupta 85
Hi,

I am getting the below error while previewing the lightning app for this challenge. Please help.

This page has an error. You might just need to refresh it. Aura.loadComponent(): Failed to initialize application. An internal server error has occurred Error ID: 1250118482-128364 (1290644278).


Here is the code : 

Application :

<aura:application>
    <c:campingListItem/>
</aura:application>

Component Code :

<aura:component >
    <aura:attribute name="item" type="TPGRND__Camping_Item__c" required="true"/>
    <ui:outputText value="{!v.item.Name}"/>
    <ui:outputCheckbox value="{!v.item.TPGRND__Packed__c}"/>
    <ui:outputCurrency  value="{!v.item.TPGRND__Price__c}"/>
    <ui:outputNumber value="{!v.item.TPGRND__Quantity__c}"/>
</aura:component>

 
Shabista ZaidiShabista Zaidi
Use below code & check :
<aura:component>
    <aura:attribute name="item" type="Camping_Item__c" required="true"/>
    <p>Price:
        <lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/>
    </p>
    <p>Quantity:
        <lightning:formattedNumber value="{!v.item.Quantity__c}" style="number"/>
    </p>
    <p>
        Name: {!v.item.Name}
    </p>
    <p>
        <lightning:input type="toggle"                            
                         label="Packed?"                           
                         name="packed"                         
                         checked="{!v.item.Packed__c}" />
     </p> 
</aura:component>
 
Swarandeep Singh 15Swarandeep Singh 15
Hi  Shabista,

I was facing same error  &   i tried your code . Its not working 

User-added image
Asif AglodiyaAsif Aglodiya
Hi Swarandeep,

I fixed my error using following code.

<aura:application >
    <c:campingListItem item=''/>
</aura:application>

Hope, it will helps.
Vidhya Ramaswamy 10Vidhya Ramaswamy 10
Thank you, Asif. I was able to fix the error using
item='' in the application.