lightning component not working

I have  created a static resource for bootstrap and I am calling the classes in the component & application

// 1. apex class to handle server side methods
public class ContactController 
{
   @AuraEnabled  
   public static List<Contact> FindAll()
   {
      return [select ID,Name,Phone from Contact LIMIT 20];
   }
    //Get contacts based on Contact Name
    @AuraEnabled
    public static List<Contact> FindByName(String searchKey)
   {
      String name='%'+searchKey+'%';
       return [select ID,Name,Phone from Contact where Name LIKE:name LIMIT 100];
   }
    //Get contacts based on Contact ID, single record
    @AuraEnabled
    public static Contact FindByID(String conID)
   {
      return [select ID,Name,Account.Name,Phone from Contact where ID=:conID LIMIT 100];
   }
}
// 2 lightning component : contactList_comp
<aura:component controller="ContactController">
	<aura:attribute name="contacts1"
                    type="Contact[]"/>  
    <aura:handler name="init"
                  value="{!this}"
                  action="{!c.doInit}"/>
    <ul class="list-group">
        <aura:iteration items="{!v.contacts1}"
                        var="con">
        <li class="list-group-item">
            <a href="{!'⌗con/'+con.ID}">
                <p>{!con.Name}</p>
                <p>{!con.Phone}</p>
            </a>
        </li>
   </aura:iteration>
    </ul>
</aura:component>
// 3 . client side controller for the component
({
	doInit : function(cmp,event)
    {
	    var action=cmp.get("c.FindAll");
        action.setCallback(this,function(a)
        {
            cmp.set("v.contacts1",a.getReturnValue());
        });
        $A.enqueueAction(action);
  	},
    searchkeychange : function(cmp,event,helper)
    {
	    var search_key=event.getParam("c.searchkey1");
        var action=cmp.get("c.FindByName");
        action.setParams({"search_key":searchkey1});
        action.setCallback(this,function(a)
        {
           cmp.set("v.contacts1",a.getReturnValue());
        });
        $A.enqueueAction(action);
	}
})
//4 search bar component
<aura:component >
	<input type="text"
           class="form-control"
           onkeyup="{!c.searchkeychange}"
           placeholder="Enter contact Name">
    </input>
</aura:component>
//5 client side controller for search bar component
({
	searchkeychange:function(component,event,helper) 
    {
		var myEvent=$A.get("e.c:searchkeychange"); 
        myEvent.setParams({"searchkey1":event.target.value});
        myEvent.fire(); 
  	}
})
// 6 event for search bar component
<aura:event type="APPLICATION" 
            description="Event template">
    <aura:attribute name="searchkey1"
                    type="String">
    </aura:attribute>
</aura:event>
//7. Now I create a an application
<aura:application >
    <link href='/resource/bootstrap/' 
          rel="stylesheet">
    </link>
    
    <div class="navbar navbar-default navbar-static-top"
         role="navigation">
    
           <div class="container">
               <div class="navbar-header">
                <a href="⌗" class="navbar-brand">Lightning Contacts</a>
                   
               </div>
           
           </div>
    </div>
    <div class="container">
        <div class="row">
               <div class="col-sm-12">
                   <c:searchbar_comp />
                   <c:ContactList_comp />
              </div>
                   
        </div>
    </div>    
</aura:application>

when I preview the app, it displays list of contacts but when I enetr any contact name in textbox , it throws an error as follows: