The argument 'fn' is not a function of the resulting string

Question

I have a part of my angular application to which I attached a controller,
since i got the argument "fn" is not an Error function, can anyone look at my code and explain why i got this error?

I would be very grateful:)

HTML markup:

<section class="col-lg-12" data-ng-controller="MessageController"> <fieldset> <legend>{{ 'MESSAGES' | translate }}</legend> </fieldset> <div class="margin-left-15"> <ul class="list-style-button"> <li data-ng-repeat="message in MSG">{{ message }}</li> </ul> </div> </section> 

controller:

 (function () { 'use strict'; var controllers = angular.module('portal.controllers'); controllers.controller('MessageController',['$scope','MessageService','$rootScope', function MessageController($scope, MessageService, $rootScope){ $rootScope.MSG = MessageService.getMessages(); $rootScope.$watch('MSG', function(newValue){ $scope.MSG = newValue; }); }]); }()); 

Services:

 (function(){ 'use strict'; var messageServices = angular.module('portal.services'); messageServices.factory('MessageService', ['MessageData','localStorageService', 'UserService'], function(MessageData, localStorageService, UserService){ return new MessageService(MessageData, localStorageService, UserService); }); function MessageService(MessageData, localStorageService, UserService){ this.messageData = MessageData; this.localStorageService = localStorageService; this.userService = UserService; } MessageService.prototype.getMessages = function(){ var locale = this.userService.getUserinfoLocale(); var messages = this.localStorageService.get(Constants.key_messages+locale); if(messages !== null && messages !== undefined){ return JSON.parse(messages); } else { return this.messageData.query({locale: locale}, $.proxy(function(data, locale){ this.save(Constants.key_messages+locale, JSON.stringify(data)); }, this)); } }; MessageService.prototype.save = function(key, value){ this.localStorageService.add(key, value); }; }()); 

Data:

 (function(){ 'use strict'; var data = angular.module('portal.data'); data.factory('MessageData', function($resource){ return $resource(Constants.url_messages,{},{ query: {method: 'GET', params: {locale: 'locale'}, isArray: true} }); }); }()); 

order of js files in html-header:

 <script src="js/lib/jquery-1.10.js"></script> <script src="js/lib/angular.js"></script> <script src="js/lib/angular-resource.js"></script> <script src="js/lib/angular-translate.js"></script> <script src="js/lib/angular-localstorage.js"></script> <script src="js/lib/jquery-cookies.js"></script> <script src="js/lib/bootstrap.js"></script> <script src="js/portal.js"></script> 

Answer 1

The problem was using the “wrong” syntax to create the service
instead of using:

 messageServices.factory('MessageService', ['MessageData','localStorageService', 'UserService'], function(MessageData, localStorageService, UserService){ return new MessageService(MessageData, localStorageService, UserService); } ); 

I had to use:

 messageServices.factory('MessageService', ['MessageData','localStorageService', 'UserService', function(MessageData, localStorageService, UserService){ return new MessageService(MessageData, localStorageService, UserService); } ]); 

I soon closed the array with parameters, and since I am still participating, I did not see it directly, anyway, I hope that I can help others who stumble on this.

Answer 2

Today I got the same error while making this stupid mistake:

 (function(){ angular .module('mymodule') .factory('myFactory', 'myFactory'); // <-- silly mistake myFactory.$inject = ['myDeps']; function myFactory(myDeps){ ... } }()); 

instead of this:

 (function(){ angular .module('mymodule') .factory('myFactory', myFactory); // <-- right way to write it myFactory.$inject = ['myDeps']; function myFactory(myDeps){ ... } }()); 

In fact, the string "myFactory" was delivered to the injector that was waiting for the function, not the string. This explains the error [ng: areq].

Answer 3

The above answers helped me significantly fix the same problem as in my application, which arose for another reason.

At one time, my client application is concatenated and minimized, so I write Angular specifically to avoid the problems associated with this. I define my config as follows

 config.$inject = []; function config() { // config stuff } 

(I define the function, $inject it as a module and declare what it is).

And then I tried to register config in the same way as I registered other modules in my application (controllers, directives, etc.).

 angular.module("app").config('config', config); // this is bad! // for example, this is right angular.module("app").factory('mainService', mainService); 

This is wrong and gave me the above error. So I switched to

 angular.module("app").config(config); 

And it worked. I think that Angular developers intended config have a unique instance and therefore have Angular not accept the name when config registered.

Answer 4

I had the same problem, and in my case, the problem was in the angular-cookies.js file. This was in a folder with other angularjs scripts, and when I used gulp to minimize my js files, an error occurred.

A simple solution was to place the angular-cookies.js file in another folder outside the selected folder in order to minimize js files.