인수 'fn'은 문자열이있는 함수가 아닙니다.

인수 'fn'은 문자열이있는 함수가 아닙니다.

---

나는 컨트롤러를 바인딩 한 앵귤러 애플리케이션에 일부가 있는데, 그
이후로 인수 'fn'은 함수 오류가 아닙니다. 누구나 내 코드를보고 왜 그 오류가 발생했는지 설명 할 수 있습니까?

나는 매우 감사 할 것입니다 :)

html 마크 업 :

<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>

제어 장치:

(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;
    });
  }]);
}());

서비스:

(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);
  };

}());

데이터:

(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
      }
    });
  });
}());

html 헤드의 js 파일 순서 :

<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>

---

문제는 '잘못된'구문을 사용하여 서비스를 만드는
대신 다음을 사용하는 것입니다.

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

나는 사용해야했다 :

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

나는 곧 매개 변수로 배열을 닫았고 아직 배우는 중이므로 직접 보지 못했지만 어쨌든이 문제를 발견하는 다른 사람들을 도울 수 있기를 바랍니다.

---

오늘 나는 그 어리석은 실수를하면서 같은 종류의 오류를 얻었습니다.

(function(){

  angular
    .module('mymodule')
    .factory('myFactory', 'myFactory');   // <-- silly mistake 

  myFactory.$inject = ['myDeps'];
  function myFactory(myDeps){
    ...
  }

}());

그 대신에:

(function(){

  angular
    .module('mymodule')
    .factory('myFactory', myFactory);   // <-- right way to write it    

  myFactory.$inject = ['myDeps'];
  function myFactory(myDeps){
    ...
  }

}());

In fact the string "myFactory" was brought into the injector who was waiting for a function and not a string. That explained the [ng:areq] error.

---

The above answers helped me considerably in correcting the same issue I had in my application that arose from a different cause.

At built time, my client app is being concatenated and minified, so I'm writing my Angular specifically to avoid related issues. I define my config as follows

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

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

And then I tried to register the config just as I registered other modules in my app (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 aforementioned error. So I changed to

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

And it worked. I guess the angular devs intended config to have a singular instance and by so having Angular not accept a name when config is registered.

---

I had the same issue and In my case the problem was with angular-cookies.js file. It was in folder with other angularjs scripts and when I have used gulp to minify my js files the error occured.

Simple solution was just to place the angular-cookies.js file to another folder, outside the selected folder to minify js files.

---

My case

  let app: any = angular.module("ngCartosServiceWorker"),
    requires: any[] = [
      "$log",
      "$q",
      "$rootScope",
      "$window",
      "ngCartosServiceWorker.registration",
      PushNotification
    ];
  app.service("ngCartosServiceWorker.PushNotification");

I forgot to add requires Array as parameters to service like this

app.service("ngCartosServiceWorker.PushNotification", requires);

참고URL : https://stackoverflow.com/questions/19095129/argument-fn-is-not-a-function-got-string