angular.js:13424 Error: [ng:areq] Argument 'fn' is not a function, got Object

Question

I'm new to programming in html/JS/AngularJS. I'm trying to implement a simple angular component but i keep getting errors. I looked at other answers and can't find the solution why this simple implementation is creating the error in the console (the error is mentioned in title). please help. picture of console out put

var myApp = angular.module('RingShopApp', []);
function appctrlcontroller($scope) {

}
myApp.controller('appctrl', appctrlcontroller);
console.log("appctrl done");
myApp.component('ringtabs', {
 template: "<p>sdfsdfsdfsdfsdfdf</p>",
 // templateUrl: 'html/Directives/tabs.html',
 controller: myApp.controller('appctrl')
});
console.log("ringtabs component");

    <!DOCTYPE html>
    <html >
      <head>
      </head>
    
      <body  ng-app="RingShopApp">
       <ringtabs></ringtabs>
     
     
     <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js'></script>
     <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js'></script>
     <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-route.min.js'></script>
     <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js'></script>
     <script  src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js'></script>
     <script src="js/index.js"></script>
    
        
        
        
      </body>
    </html>

score 1 · Answer 1 · answered May 15 '16 at 13:55

You should be providing the controller function directly to your component instead of through the angular controller getter:

var myApp = angular.module('RingShopApp', []);
myApp.controller('appcontroller', appcontroller);
myApp.component('ringtabs', {
    template: "<p>sdfsdfsdfsdfsdfdf</p>",
    controller: 'appcontroller'
});

function appcontroller($scope) {
    ...
}

appcontroller.$inject = ['$scope'];

Be careful to add the $inject property to your controller to avoid potential problems with minification.

Noy Oliel · Answer 2 · 2016-05-15T15:33:18.773

@Sajeetharan posted an answer here that solved the problem but he deleted it from the comments. His answer was that I should change ".component" to ".directive" because it was a mixture of angular2 and of angular. This is the code that was edited. It seems to work fine:

var myApp = angular.module('RingShopApp', []);
function appctrlcontroller($scope) {

}
myApp.controller('appctrl', appctrlcontroller)
       
.directive('ringtabs', function(){
 return {
 templateUrl: 'html/Directives/tabs.html'
 //controller: myApp.controller('appctrl')
 }; 
});
console.log("ringtabs component");

angular.js:13424 Error: [ng:areq] Argument 'fn' is not a function, got Object

2 Answers2