angularjs [ng:areq] Argument 'fn' is not a function, got string

Question

I am new to angular js..I am getting follwing error please help me out

[ng:areq] Argument 'fn' is not a function, got string

var app = angular.module('demo',[]);


app.config('$routeProvider',function($routeProvider){

    $routeProvider.when('/add',{
        templateUrl:'demo/add.html',
        controller:'addcontroller'
    }).
    when('/order',{
        templateUrl:'demo/order.html',
        controller:'ordercontroller'
    });

});

app.controller('addcontroller',function($scope){
    $scope.message="order";
});
app.controller('ordercontroller',function($scope){
    $scope.message="order";
});

Where and when do you get that error? – Tim May 12 '14 at 06:20 — Tim, May 12 '14 at 06:20

score 34 · Answer 1 · edited May 12 '14 at 06:53

I think the error is in the config block, it should either be:

app.config(function($routeProvider){
  // routeProvider config
});

or better:

app.config(['$routeProvider', function($routeProvider){
  // routeProvider config, allows minification
}]);

the annotations are there for minification to work correctly. You can read more about it on AngularJS docs https://docs.angularjs.org/tutorial/step_05 Please note that this practice needs to be done throughout the app to work correctly.

score 15 · Answer 2 · answered Mar 17 '15 at 10:41

Although not directly related to the context of this question, this error message can also be caused by a resolve block returning something else than a function, like this:

$stateProvider.state('mystate', {
    url: "/myurl",
    templateUrl: "mytemplate.html",
    controller: "MyController",
    resolve: {
        authenticatedUser: securityAuthorizationProvider.requireAuthenticatedUser
    }
});

if securityAuthorizationProvider.requireAuthenticatedUser happens to be undefined, you can get this error.

score 3 · Answer 3 · answered Feb 07 '16 at 18:26

I know this is an older post, but thought I'd contribute what was wrong with my code with this exact error. I was injecting a service into my controller this way:

theApp.directive('theDirective', 'myService', ['$http', function ($http, myService) {}]);

Instead of this:

theApp.directive('theDirective', ['$http', 'myService', function ($http, myService) {}]);

Notice that my service was included outside of the inline array annotation! It was a boneheaded move on my part that cost me way too much time.

score 2 · Answer 4 · answered Oct 29 '16 at 19:12

For the the problem was defining factory dependency outside the array. Most probably the minification was also an issue.

//Error in this
  angular
    .module('mymodule').factory('myFactory', 'thisconstant', function (thisconstant) {

});

This fixed by

//correct code
  angular
    .module('mymodule').factory('myFactory', ['thisconstant', function (thisconstant) {

}]);

score 2 · Answer 5 · answered Sep 10 '19 at 10:54

Since there's been various use cases added here, I thought I'd also add mine. I got this error when re-formating a function service

angular
.app('myApp')
.service('MyService', function (){
  // do something
return MyService;
})

into a class object:

export default class MyService { ... }

angular
    .app('myApp')
    .service('MyService', MyService);

My problem was that my service was returning itself at the end of the function and I needed to add a class function, which would do this:

export default class MyService {
  constructor(){
  // doing something
  }

  get() {
  return MyService;
  }
}

which fixed the issue for me. :)

score 1 · Answer 6 · edited May 23 '17 at 11:54

I got this error by misunderstanding the way anonymous functions and named functions are treated in JavaScript.

This causes the error:

angular.module("app").factory("myDataService", ['$resource', myDataService]);
var myDataService = function($resource) {
    return $resource('/url');
}

I should've either done this:

var myDataService = function($resource) {
    return $resource('/url');
}
angular.module("app").factory("myDataService", ['$resource', myDataService]);

Or this:

angular.module("app").factory("myDataService", ['$resource', myDataService]);
function myDataService($resource) {
    return $resource('/url');
}

More on the difference between anonymous function and named function here

score 1 · Answer 7 · edited Aug 01 '16 at 12:36

1

In First line you need to use like this,

var app = angular.module('demo', ['ngRoute']);

and use the routing thing like this,

$routeProvider.when('/add').then({
        templateUrl:'demo/add.html',
        controller:'addcontroller'
    });

Just try these steps once.

edited Aug 01 '16 at 12:36

Emre Bolat

4,316
5
29
32

answered Aug 01 '16 at 11:12

R Vishnu Kumar

11
2

angularjs [ng:areq] Argument 'fn' is not a function, got string

7 Answers7