각도 js 알 수없는 공급자

152

내 REST API에 맞게 mongolab 예제를 "사용자 정의"하려고합니다. 이제이 오류가 발생하고 내가 뭘 잘못했는지 잘 모르겠습니다.

Error: Unknown provider: ProductProvider <- Product
    at Error (unknown source)
    at http://localhost:3000/js/vendor/angular.min.js:28:395
    at Object.c [as get] (http://localhost:3000/js/vendor/angular.min.js:26:180)
    at http://localhost:3000/js/vendor/angular.min.js:28:476
    at c (http://localhost:3000/js/vendor/angular.min.js:26:180)
    at d (http://localhost:3000/js/vendor/angular.min.js:26:314)

이것은 내 컨트롤러입니다.

function ProductListCtrl($scope, Product) {
  $scope.products = Product.query();
}

그리고 이것은 모듈입니다 :

angular.module('productServices', ['ngResource']).
    factory('Product', ['$resource', function($resource){
      var Product = $resource('/api/products/:id', {  }, {
        update: { method: 'PUT' }
      });

      return Product;
    }]);

angularjs

— 스테판 에른스트
소스

이 오류는 각도가 제품 팩토리에 대해 알지 못함을 나타냅니다.이 서비스의 JS가 먼저 참조되는지 확인하십시오. 또한 모듈을 선언 할 때 파일을 최소화 할 때 이름을 변경하여이 오류가 발생하기 때문에 종속성을 명시 적으로 정의해야합니다. 자세한 내용은이 기사를 참조하십시오 :: ozkary.com/2015/11/…

— ozkary 1

130

샘플 jsFiddle에 복사하여 붙여 넣을 때 코드 자체가 실제로 작동합니다 (전화 자체는 제외) : http://jsfiddle.net/VGaWD/

더 완전한 예제를 보지 않고 무슨 일이 일어나고 있는지 말하기는 어렵지만 위의 jsFiddle이 도움이되기를 바랍니다. 내가 의심하는 것은 'productServices'모듈로 앱을 초기화하지 않는다는 것 입니다. 동일한 오류가 발생하면 다른 jsFiddle에서 볼 수 있습니다 : http://jsfiddle.net/a69nX/1/

당신이 AngularJS와 함께 작동하도록 계획하고 MongoLab 경우 나는 $ 자원 및 MongoLab에 대한 기존의 어댑터를 사용하는 것이 좋습니다 것입니다 : https://github.com/pkozlowski-opensource/angularjs-mongolab 그것은 당신이 MongoLab 작업을 고통의 정도 완화 http://jsfiddle.net/pkozlowski_opensource/DP4Rh/ 면책 조항 여기에서 실제로 볼 수 있습니다 ! 이 어댑터 (AngularJS 예제를 기반으로 작성)를 유지하고 있으므로 분명히 여기에 편향되어 있습니다.

— pkozlowski.opensource
소스

나는 같은 문제가 있는데 이것이 내 문제를 해결하지 못했습니다. 실제로 데이터를 다시 가져옵니다 ...이 오류 메시지를 제외하고는 모든 것이 제대로 작동한다고 생각합니다. body 요소에 ng-app을 사용하지 않고 부트 스트랩을 수행합니다. angular.element (document) .ready (function () {angular.bootstrap (document, [ 'reportServices']);});

— Tom

17

안녕하세요 여러분, 이것은 조금 당황 스럽습니다. 나는 정확히 같은 문제가 있습니다. 그러나 2 jsFiddles의 차이점을 알 수 없습니다. 정확히 어디를 볼지에 대한 힌트는 대단히 감사합니다.

— schacki

4

@schacki, 바이올린의 차이점은 정보 탭에서 찾을 수 있습니다. 그들 중 하나는 몸을 가지고 <body ng-app="productServices">있고 다른 하나는 몸을 가지고 <body ng-app="">있습니다.

— Vineet Reynolds 2012

정보 탭은 어디에 있습니까? :)

— Aleks

3

정보 탭이 이제 Fiddle Options오른쪽

— 탭인 것 같습니다

40

팩토리 정의에 잘못된 매개 변수를 전달했기 때문에 해당 오류가 발생했습니다. 나는했다 :

myModule.factory('myService', function($scope, $http)...

$scope팩토리 정의를 제거 하고 팩토리 정의를 다음과 같이 변경 했을 때 작동했습니다 .

myModule.factory('myService', function( $http)...

주입해야 할 경우 다음을 $scope사용하십시오.

myModule.factory('myService', function($rootScope, $http)...

— Bresleveloper
소스

32

방금 비슷한 문제가있었습니다. 오류는 질문에서 동일하게 말했다 .pkozlowski.opensource와 Ben G의 대답으로 문제를 해결하려고 시도했지만 정답과 좋은 대답입니다.

내 문제는 실제로 같은 오류로 다릅니다.

내 HTML 코드에서 다음과 같이 초기화했습니다 ...

<html ng-app>

조금 더 아래로 다음과 같이하려고했습니다.

<div id="cartView" ng-app="myApp" ng-controller="CartCtrl">

첫 번째 것을 제거했습니다 ... 그런 다음 작동했습니다 ... 분명히 ng-app를 두 번 이상 초기화 할 수 없습니다. 그럴 수 있지.

나는 첫 번째 "ng-app"에 대해 완전히 잊어 버렸고 완전히 좌절했습니다. 언젠가 누군가를 도울 것입니다 ...

— 프리 엑소
소스

2

비슷한 문제가 있었지만 제 경우 에는 ng-controller를 div 에 지정 하면 서비스를 참조하는 컨트롤러의 범인이었습니다. Angular는 뷰를 구문 분석 할 때 서비스를 해결하는 방법을 몰랐습니다.

— 헥터 코레아

25

메인 app.js에 의존하는 서비스가 메인에 포함되어 있는지 확인하십시오 . 예를 들면 다음과 같습니다.

/* App Module */
angular.module('myApp', ['productServices']). 
.....

— 초급 AngularJs
소스

1

내가 실수하지 않으면 그러한 경우 productServices모듈이어야하므로 해당 모듈 내부의 서비스 (서비스 여부)와 관련이 없습니다.

— greenoldman

17

pkozlowski의 대답은 정확하지만 다른 사람에게 이런 일이 발생할 경우 같은 모듈을 실수로 두 번 만든 후에도 같은 오류가 발생했습니다. 두 번째 정의는 첫 번째 공급자를 재정의했습니다.

내가함으로써 모듈을 만들었습니다.

angular.module('MyService'...
).factory(...);

같은 파일에서 조금 더 아래로 내려갑니다.

angular.module('MyService'...
).value('version','0.1');

이를 수행하는 올바른 방법은 다음과 같습니다.

angular.module('MyService'...
).factory(...).value('version','0.1');

— 벤 G
소스

11

제 경우에는 새로운 제공자를 정의했습니다. xyz

angular.module('test')
.provider('xyz', function () {
    ....
});

위의 공급자를 구성 할 때 Provider문자열을 추가하여-> xyz될 것 xyzProvider입니다.

전의:

angular.module('App', ['test'])
.config(function (xyzProvider) {
     // do something with xyzProvider....
});

'Provider'문자열없이 위의 공급자를 주입하면 OP에서도 비슷한 오류가 발생합니다.

— 마니 칸타
소스

8

JS 파일 끝에서 내가 가지고 있던 팩토리 기능을 닫습니다.

});

대신에

}());

— 마일로 P
소스

1

내 프로젝트에는 보통 다음을 사용합니다})();

— mrOak

5

추적하는 데 시간이 너무 오래 걸렸습니다. 지시문 내에서 컨트롤러를 미니 세이프하십시오.

.directive('my_directive', ['injected_item', function (injected_item){

  return {

    controller: ['DO_IT_HERE_TOO', function(DO_IT_HERE_TOO){

    }]
  }
}

희망이 도움이

— pk1m
소스

5

여기에 내 경험을 추가하기 위해 모듈 구성 기능 중 하나에 서비스를 주입하려고했습니다. 내가 찾은 문서 의이 단락은 왜 작동하지 않는지 설명합니다.

애플리케이션 부트 스트랩 동안 Angular는 모든 서비스 생성을 시작하기 전에 모든 공급자를 구성하고 인스턴스화합니다. 이것을 응용 프로그램 수명주기의 구성 단계라고합니다. 이 단계에서는 아직 생성되지 않았기 때문에 서비스에 액세스 할 수 없습니다.

즉, 제공자를 module.config (...) 함수에 삽입 할 수 있지만 module.run (...)까지 기다리거나 모듈에 주입 할 수있는 제공자를 노출해야하기 때문에 서비스를 주입 할 수 없습니다. 설정

— 스튜어트 A
소스

4

나 에게이 오류는 축소 된 각도 앱을 실행하여 발생했습니다. 각도 문서는이 문제를 해결하는 방법을 제안합니다. 다음은 문제를 설명하는 관련 인용문이며 문서 자체에서 제안 된 솔루션을 찾을 수 있습니다 .

최소화에 대한 참고 사항 Angular는 인수 이름에서 컨트롤러 생성자 함수에 대한 컨트롤러의 종속성을 유추하므로 PhoneListCtrl 컨트롤러에 대한 JavaScript 코드를 축소하면 모든 함수 인수가 축소되고 종속성 인젝터가 그렇지 않습니다. 서비스를 올바르게 식별 할 수 있어야합니다.

— 사샤
소스

3

이것이 Google의 "angularjs unknown provider"에 대한 최고의 결과이므로 여기 또 다른 문제가 있습니다. Jasmine으로 단위 테스트를 수행 할 때 beforeEach()기능에 다음 내용이 있는지 확인하십시오 .

module('moduleName');

그렇지 않으면 테스트에서 동일한 오류가 발생합니다.

— 루 파마 틱
소스

3

서비스가 별도의 javascript 파일에 정의되어 있으면이 오류가 발생하는 또 다른 경우를 참조하십시오! 네, 신인 실수입니다.

— 제이슨
소스

2

내 서비스를 모두 보유한 파일을 주입하는 것을 잊고있었습니다. 앱 모듈을 초기화 할 때이 작업을 수행해야합니다.

angular.module('myApp', ['myApp.services', ... ]);

— 조리스
소스

2

필자의 경우 익명 함수를 다음과 같이 각도 모듈의 래퍼로 사용했습니다.

(function () {
var app = angular.module('myModule', []);
...
})();

괄호를 닫은 후 위와 같이 괄호를 다시 열고 닫아 익명 함수를 호출하는 것을 잊었습니다.

— 에마누엘레 벨리니
소스

4 년 전에 답변을했지만 오늘 도움이되었습니다.

— 레골라스

1

나에게 문제는 게으른 로딩이었다. 컨트롤러와 서비스를 늦게로드했기 때문에 페이지로드 (및 각도 초기화)에서 사용할 수 없었습니다. ui-if 태그 로이 작업을 수행했지만 관련이 없습니다. 해결책은 이미 페이지를로드 한 상태에서 서비스를로드하는 것입니다.

— 곤피 덴 차찰
소스

1

이 오류를 볼 수있는 또 다른 가능한 시나리오는 다음과 같습니다.

Sublime Text 2 및 각도 플러그인을 사용하면 다음과 같은 스텁이 생성됩니다.

angular.module('utils', [])
.factory('utilFactory', [''
    function() {
        return {

        }
    }
]);

'utilFactory'문자열 다음에 배열의 첫 번째 요소로 빈 ''이 표시됩니다. 의존성이 없다면 다음과 같이 제거하십시오.

angular.module('utils', [])
.factory('utilFactory', [
    function() {
        return {

        }
    }
]);

— dustin.schultz
소스

1

이 질문은 최고의 Google 결과이므로 목록에 다른 가능성을 추가하겠습니다.

사용중인 모듈이 의존성 주입 래퍼에 실패하면 동일한 결과를 제공합니다. 예를 들어, 인터넷에서 복사 및 붙여 넣기 모듈은 underscore.js를 사용하여 di wrapper에 '_'를 삽입하려고 시도 할 수 있습니다. 프로젝트 의존성 공급자에 밑줄이 없으면 컨트롤러가 모듈의 팩토리를 참조하려고 할 때 브라우저의 콘솔 로그에 팩토리에 대한 '알 수없는 제공자'가 표시됩니다.

— 사용자 1082202
소스

1

나에게 문제는 내가 서비스를 참조하는 새로운 자바 스크립트 파일이 몇 개 있지만 Chrome은 이전 버전 만 보았습니다. CTRL + F5가 나를 위해 수정했습니다.

— 모르 티
소스

0

Grunt로 프로젝트를 컴파일 할 때 angular-mocks (ngMockE2E)와 관련된 "알 수없는 제공자"오류가 발생했습니다. 문제는 각도 모의를 축소 할 수 없으므로 축소 된 파일 목록에서 제거해야한다는 것입니다.

— 러스티 파우 삭
소스

0

이 오류를 처리 한 후에도이 답변 목록을 자체 사례로 지원할 수 있습니다.

동시에 간단하고 바보입니다 (나 같은 초보자에게는 멍청하지 않을 수도 있지만 전문가에게는 그렇습니다). angular.min.js에 대한 스크립트 참조는 html 페이지의 스크립트 목록에서 첫 번째이어야합니다.

이것은 작동합니다 :

<script src="Scripts/angular.min.js"></script>
<script src="MyScripts/MyCartController.js"></script>
<script src="MyScripts/MyShoppingModule.js"></script>

이것은 아닙니다 :

<script src="MyScripts/MyCartController.js"></script>
<script src="MyScripts/MyShoppingModule.js"></script>
<script src="Scripts/angular.min.js"></script>

angular.min.js에 대한 알림.

그것이 누군가를 돕기를 바랍니다! :)

— 조 루이스
소스

0

내 문제는 (자본)을 사용하여 Yeoman과 관련이 있습니다.

yo angular:factory Test

제작 된 파일 (대문자 제외) :

app/scripts/services/test.js

index.html 파일은 (대문자) 포함되어 있습니다.

<script src="scripts/services/Test.js"></script>

이것이 누군가를 돕기를 바랍니다.

— 코리 로스웰
소스

0

또 다른 가능성.

나는했다 unknown Provider <- <- nameOfMyService. 다음 구문으로 오류가 발생했습니다.

module.factory(['', function() { ... }]);

Angular는 ''종속성 을 찾고있었습니다 .

— 휴고 우드
소스

오류 : [$ injector : unpr] 알 수없는 공급자 : LoginFactoryProvider <-LoginFactory이 중 하나이므로 어떻게이 문제를 해결할 수

— 있습니까

0

내 시나리오는 약간 모호 할 수 있지만 같은 오류가 발생할 수 있으며 누군가가 경험할 수 있습니다.

$ controller 서비스를 사용하여 새 컨트롤러를 인스턴스화 할 때 (첫 번째 인수로 '$ scope'를 기대 했음) 새 컨트롤러의 로컬 범위를 $ controller () 함수의 두 번째 매개 변수에 전달했습니다. 이로 인해 Angular는 존재하지 않는 $ scope 서비스를 호출하려고 시도합니다 ( 그러나 실제로는 Angular의 캐시에서 '$ scope'서비스를 어떻게 삭제했는지 생각했습니다 ). 해결책은 로컬 범위를 locals 객체로 감싸는 것입니다.

// Bad:
$controller('myController', newScope);

// Good:
$controller('myController, {$scope: newScope});

— 잭 셋
소스

0

위의 답변 중 어느 것도 나를 위해 효과가 없었습니다. 아마도 완전히 잘못하고 있었지만 초보자로서 우리가하는 일입니다.

div목록을 갖기 위해 컨트롤러를 초기화하고있었습니다 .

 <div ng-controller="CategoryController" ng-init="initialize()">

그런 다음을 사용하여 $routeProviderURL을 동일한 컨트롤러에 매핑합니다. ng-init컨트롤러를 제거하자마자 컨트롤러가 경로를 사용했습니다.

— jfs.csantos
소스

0

나는 같은 문제가 있었다. 나는 boostrap $('body').attr("ng-app", 'MyApp')대신에 사용하여 고정했습니다 <body ng-app="MyApp">.

내가 했으니 까

angular.element(document).ready(function () {        
    angular.bootstrap(document, [App.Config.Settings.AppName]);
})

아키텍처 요구 사항

— 조커 름
소스

0

Ruby on Rails 앱에서 다음을 수행했습니다.

rake assets:precompile

이것은 Angular.js를 축소하고 '개발'환경에서 수행되었습니다. /public/assets/application.js 파일에 .

/public/assets/*파일을 제거하면 문제가 해결되었습니다.

— 나이젤 셰리 던 스미스
소스

0

나는 오늘 비슷한 문제에 직면했으며 문제는 실제로 매우 작았습니다.

 app.directive('removeFriend', function($scope) {
return {
    restrict: 'E',
    templateUrl: 'removeFriend.html',
    controller: function($scope) {
        $scope.removing = false;
        $scope.startRemove = function() {
            $scope.removing = true;
        }
        $scope.cancelRemove = function() {
            $scope.removing = false;
        }
        $scope.removeFriend = function(friend) {
            var idx = $scope.user.friends.indexOf(friend)
            if (idx > -1) {
                $scope.user.friends.splice(idx, 1);
            }
        }
    }
}
});

위의 블록을 보면 첫 번째 줄에서 실수로 $ scope를 잘못 입력 한 것을 알 수 있습니다. 문제를 해결하기 위해 원치 않는 종속성을 제거했습니다.

 app.directive('removeFriend', function() {
return {
    restrict: 'E',
    templateUrl: 'removeFriend.html',
    controller: function($scope) {
        $scope.removing = false;
        $scope.startRemove = function() {
            $scope.removing = true;
        }
        $scope.cancelRemove = function() {
            $scope.removing = false;
        }
        $scope.removeFriend = function(friend) {
            var idx = $scope.user.friends.indexOf(friend)
            if (idx > -1) {
                $scope.user.friends.splice(idx, 1);
            }
        }
    }
}
});

— 라 케시 버부
소스

0

새 팩토리를 만들어 구성 요소 내에서 사용한 후에이 오류가 발생했지만 해당 구성 요소의 사양을 확인하지 않았습니다

따라서 (사양) 테스트 파일에 오류가 발생하면

당신은 추가해야합니다 beforeEach(module('YouNewServiceModule'));

— Basheer AL-MOMANI
소스

-1

또 다른 'gotcha': $ timeout을 주입하는이 오류가 발생했으며 배열 값에 공백이 있음을 깨닫는 데 몇 분이 걸렸습니다. 작동하지 않습니다.

angular.module('myapp',[].
  controller('myCtrl', ['$scope', '$timeout ', 
    function ($scope, $timeout){
      //controller logic
    }
  ]);

다른 사람에게 이와 같은 바보 같은 오류가있는 경우를 대비하여 게시하십시오.

— 루 쿠스
소스

-2

내 사건은 멍청한 타이핑이었다

myApp.factory('Notify',funtion(){

함수는 'c'!

— 착륙
소스