js góc không biết nhà cung cấp

152

Tôi đang cố gắng "tùy chỉnh" ví dụ mongolab để phù hợp với API REST của riêng tôi. Bây giờ tôi đang gặp phải lỗi này và tôi không chắc mình đang làm gì sai:

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)

Đây là bộ điều khiển của tôi:

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

và đây là mô-đun:

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

      return Product;
    }]);

angularjs

— Stefan Ernst
nguồn

Lỗi này chỉ ra rằng angular không biết về nhà máy sản phẩm, hãy đảm bảo rằng JS cho dịch vụ này được tham chiếu trước. Ngoài ra, khi khai báo các mô-đun, hãy đảm bảo xác định rõ ràng các phụ thuộc bởi vì khi các tệp được giảm thiểu, lỗi này cũng sẽ xuất hiện do xáo trộn tên. Để biết thêm thông tin, hãy xem bài viết này :: ozkary.com/2015/11/ Cách

— ozkary

130

Mã của bạn trông tốt, trên thực tế, nó hoạt động (ngoài chính các cuộc gọi) khi được sao chép và dán vào một mẫu jsFiddle: http://jsfiddle.net/VGaWD/

Khó có thể nói những gì đang diễn ra mà không thấy một ví dụ đầy đủ hơn nhưng tôi hy vọng rằng jsFiddle ở trên sẽ hữu ích. Điều tôi nghi ngờ là bạn không khởi tạo ứng dụng của mình với mô-đun 'sản phẩm dịch vụ' . Nó sẽ đưa ra lỗi tương tự, chúng ta có thể thấy điều này trong một jsFiddle khác: http://jsfiddle.net/a69nX/1/

Nếu bạn đang dự định làm việc với AngularJS và MongoLab, tôi khuyên bạn nên sử dụng bộ điều hợp hiện có cho $ resource và MongoLab : https://github.com/pkozlowski-opensource/angularjs-mongolab Nó giúp giảm bớt nỗi đau khi làm việc với MongoLab, bạn có thể thấy nó hoạt động ở đây: http://jsfiddle.net/pkozlowski_opensource/DP4Rh/ Tuyên bố miễn trừ trách nhiệm! Tôi đang duy trì bộ điều hợp này (được viết dựa trên các ví dụ của AngularJS) vì vậy rõ ràng tôi thiên vị ở đây.

— pkozlowski.opensource
nguồn

Tôi có cùng một vấn đề và điều này không giải quyết được vấn đề của tôi. Tôi thực sự lấy lại dữ liệu ... Ngoại trừ thông báo lỗi này, bạn sẽ nghĩ mọi thứ đều hoạt động tốt. Mặc dù vậy, tôi không sử dụng ng-app trong phần tử cơ thể, tôi cũng đang bootstrapping như vậy: angular.element (document). Yet (function () {angular.bootstrap (document, ['reportService']);});

— Tom

17

Chào các bạn, đây là một chút ngượng ngùng. Tôi có chính xác cùng một vấn đề. Nhưng tôi không thể nhận ra sự khác biệt giữa 2 jsFiddles. Bất kỳ gợi ý về nơi để nhìn chính xác được đánh giá cao.

— schacki

4

@schacki, Sự khác biệt trong các câu đố có thể được tìm thấy trong tab thông tin. Một trong số họ có một cơ thể với <body ng-app="productServices">và người kia có <body ng-app="">.

— Vineet Reynold

Và tab thông tin ở đâu? :)

— Aleks

3

Có vẻ như tab thông tin hiện là Fiddle Optionstab bên phải

— Gangstead

40

Tôi đã gặp lỗi đó vì tôi đã chuyển một tham số không chính xác cho định nghĩa của nhà máy. Tôi đã có:

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

Nó hoạt động khi tôi loại bỏ $scopevà thay đổi định nghĩa của nhà máy thành:

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

Trong trường hợp bạn cần tiêm $scope, sử dụng:

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

— bresleveloper
nguồn

32

Tôi chỉ có một vấn đề tương tự. Lỗi nói giống như trong câu hỏi, đã cố gắng giải quyết nó bằng câu trả lời của pkozlowski.opensource và Ben G, cả hai đều là câu trả lời đúng và tốt.

Vấn đề của tôi thực sự khác nhau với cùng một lỗi:

trong Mã HTML của tôi, tôi đã khởi tạo như thế này ...

<html ng-app>

Xa hơn một chút tôi đã cố gắng làm một cái gì đó như thế này:

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

Tôi đã thoát khỏi cái đầu tiên ... sau đó nó hoạt động ... rõ ràng bạn không thể khởi tạo ng-app hai lần trở lên. đủ công bằng.

Tôi đã quên mất "ng-app" đầu tiên và thất vọng hoàn toàn. Có lẽ điều này sẽ giúp ai đó vào ngày mai ...

— Preexo
nguồn

2

Tôi đã có một vấn đề tương tự nhưng trong trường hợp của tôi có bộ điều khiển ng được chỉ định trong div là thủ phạm cho bộ điều khiển tham chiếu dịch vụ. Có vẻ như Angular không biết cách giải quyết dịch vụ khi phân tích cú pháp chế độ xem.

— Hector Correa

25

Hãy chắc chắn rằng chính của bạn app.jsbao gồm các dịch vụ mà nó phụ thuộc. Ví dụ:

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

— Sơ cấpAngularJs
nguồn

1

Nếu tôi không nhầm, trong trường hợp như vậy productServices nên là một mô-đun, vì vậy nó không liên quan những gì bên trong mô-đun đó (dịch vụ hay không).

— greenoldman

17

Câu trả lời của pkozlowski là đúng, nhưng chỉ trong trường hợp điều này xảy ra với người khác, tôi đã gặp lỗi tương tự sau khi tạo cùng một mô-đun hai lần; định nghĩa thứ hai đã ghi đè lên nhà cung cấp thứ nhất:

Tôi đã tạo ra các mô-đun bằng cách làm

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

sau đó một chút nữa trong cùng một tập tin:

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

Cách chính xác để làm điều này là:

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

— Bến G
nguồn

11

Trong trường hợp của tôi, tôi đã xác định một nhà cung cấp mới, giả sử, xyz

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

Khi bạn định cấu hình nhà cung cấp ở trên, bạn đã thêm nó với Providerchuỗi được nối thêm -> xyztrở thành xyzProvider.

Ví dụ:

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

Nếu bạn tiêm nhà cung cấp ở trên mà không có chuỗi 'Nhà cung cấp', bạn sẽ gặp lỗi tương tự trong OP.

— manikanta
nguồn

8

Vào cuối tệp JS để đóng chức năng xuất xưởng, tôi có

});

thay vì

}());

— Milo P
nguồn

1

Đối với dự án của tôi, chúng tôi thường sử dụng})();

— mrOak

5

Điều này khiến tôi mất quá nhiều thời gian để theo dõi. Hãy chắc chắn rằng bạn minisafe bộ điều khiển của bạn trong chỉ thị của bạn.

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

  return {

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

    }]
  }
}

Mong rằng sẽ giúp

— pk1m
nguồn

5

Để thêm kinh nghiệm của riêng tôi vào đây, tôi đã cố gắng đưa một dịch vụ vào một trong các chức năng cấu hình mô-đun của mình. Đoạn này từ các tài liệu mà cuối cùng tôi tìm thấy giải thích tại sao nó không hoạt động:

Trong quá trình bootstrap của ứng dụng, trước khi Angular ngừng tạo tất cả các dịch vụ, nó sẽ cấu hình và khởi tạo tất cả các nhà cung cấp. Chúng tôi gọi đây là giai đoạn cấu hình của vòng đời ứng dụng. Trong giai đoạn này, các dịch vụ không thể truy cập được vì chúng chưa được tạo.

Có nghĩa là bạn có thể tiêm các nhà cung cấp vào các hàm module.config (...), nhưng bạn không thể tiêm dịch vụ, vì bạn cần đợi cho đến khi module.run (...) hoặc hiển thị nhà cung cấp mà bạn có thể tiêm vào mô-đun. cấu hình

— Stewart A
nguồn

4

Đối với tôi, lỗi này là do chạy phiên bản rút gọn của ứng dụng góc cạnh của tôi. Các tài liệu góc cạnh gợi ý một cách để giải quyết vấn đề này. Dưới đây là trích dẫn có liên quan mô tả vấn đề và bạn có thể tìm thấy giải pháp được đề xuất trong chính các tài liệu ở đây :

Lưu ý về Giảm thiểu do Angular xâm nhập vào các phụ thuộc của bộ điều khiển từ tên của các đối số cho hàm xây dựng của bộ điều khiển, nếu bạn đã thu nhỏ mã JavaScript cho bộ điều khiển PhoneListCtrl, thì tất cả các đối số chức năng của nó cũng sẽ được giảm thiểu. có thể xác định chính xác các dịch vụ.

— Sasha
nguồn

3

Vì đây là kết quả hàng đầu cho "nhà cung cấp không xác định angularjs" trên Google ngay bây giờ, đây là một hình ảnh xác thực khác. Khi thực hiện kiểm tra đơn vị với Jasmine, hãy đảm bảo bạn có câu lệnh này trong beforeEach()chức năng của mình :

module('moduleName');

Nếu không, bạn sẽ nhận được lỗi tương tự trong các bài kiểm tra của bạn.

— roufamatic
nguồn

3

Một trường hợp khác xảy ra lỗi này, nếu dịch vụ của bạn được xác định trong một tệp javascript riêng, hãy đảm bảo bạn tham chiếu nó! Vâng, tôi biết, sai lầm tân binh.

— Jason
nguồn

2

Tôi đã quên tiêm tệp giữ dịch vụ của mình hoàn toàn. Hãy nhớ làm điều này khi khởi tạo mô-đun ứng dụng của bạn:

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

— jorisw
nguồn

2

Trong trường hợp của tôi, tôi đã sử dụng một hàm ẩn danh làm trình bao bọc cho mô-đun góc, như thế này:

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

Sau khi đóng dấu ngoặc đơn, tôi quên gọi hàm ẩn danh bằng cách mở và đóng lại dấu ngoặc đơn như trên.

— Emanuele Bellini
nguồn

Tôi biết bạn đã trả lời nó 4 năm trước, nhưng nó đã giúp tôi hôm nay, cảm ơn.

— Legolas

1

Đối với tôi vấn đề là lười tải; Tôi đã tải bộ điều khiển và dịch vụ của mình muộn, vì vậy chúng không có sẵn khi tải trang (và khởi tạo góc). Tôi đã làm điều này với một thẻ ui-if, nhưng điều đó không liên quan. Giải pháp là tải dịch vụ với tải trang.

— Gonfi den Tschal
nguồn

1

Đây là một kịch bản có thể xảy ra khi bạn có thể thấy lỗi này:

Nếu bạn sử dụng Sublime Text 2 và plugin góc cạnh, nó sẽ tạo ra các sơ khai như thế này

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

        }
    }
]);

chú ý trống '' là phần tử đầu tiên của mảng sau chuỗi 'producFactory'. Nếu bạn không có bất kỳ sự phụ thuộc nào, hãy loại bỏ nó để nó như thế này:

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

        }
    }
]);

— Dustin.schultz
nguồn

1

Vì câu hỏi này là kết quả hàng đầu của google, tôi sẽ thêm một điều có thể vào danh sách.

Nếu mô-đun mà bạn đang sử dụng bị lỗi trên trình bao bọc tiêm phụ thuộc, nó sẽ cung cấp kết quả tương tự. Ví dụ, sao chép và dán các mô-đun từ internet có thể dựa vào underscore.js và cố gắng thêm '_' trong trình bao bọc di. Nếu gạch dưới không tồn tại trong các nhà cung cấp phụ thuộc dự án của bạn, khi bộ điều khiển của bạn cố gắng tham chiếu nhà máy của mô-đun, nó sẽ nhận được 'nhà cung cấp không xác định' cho nhà máy của bạn trong nhật ký bảng điều khiển của trình duyệt.

— người dùng1082202
nguồn

1

Vấn đề đối với tôi là có một số tệp javascript mới mà tôi đã tạo tham chiếu dịch vụ nhưng Chrome chỉ thấy phiên bản cũ hơn. Một CTRL + F5 đã sửa nó cho tôi.

— vữa
nguồn

0

Tôi đã gặp một lỗi "nhà cung cấp không xác định" liên quan đến angular-mocks (ngMockE2E) khi biên dịch dự án của tôi với Grunt. Vấn đề là các góc cạnh không thể được thu nhỏ nên tôi phải xóa nó khỏi danh sách các tệp được rút gọn.

— Rỉ Fausak
nguồn

0

Sau khi xử lý với lỗi này, tôi có thể hỗ trợ danh sách các câu trả lời với trường hợp của riêng tôi.

Đồng thời đơn giản và ngu ngốc (có thể không ngu ngốc đối với những người mới bắt đầu như tôi, nhưng vâng đối với các chuyên gia), tham chiếu tập lệnh đến angular.min.js phải là tập lệnh đầu tiên trong danh sách tập lệnh của bạn trong trang html.

Những công việc này:

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

Không phải cái này:

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

Lưu ý về angular.min.js.

Hy vọng nó sẽ giúp được ai !! :)

— Joe Lewis
nguồn

0

Vấn đề của tôi là với Yeoman, sử dụng (viết hoa):

yo angular:factory Test

Tạo các tập tin (không được cung cấp):

app/scripts/services/test.js

nhưng tệp index.html được bao gồm (viết hoa):

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

Hy vọng điều này sẽ giúp được ai đó.

— Corey Rothwell
nguồn

0

Một khả năng khác.

Tôi đã có unknown Provider <- <- nameOfMyService. Lỗi được gây ra bởi cú pháp sau:

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

Angular đang tìm kiếm sự ''phụ thuộc.

— Gỗ Hugo
nguồn

Lỗi: [$ kim phun: không] Nhà cung cấp không xác định: Đăng nhậpFactoryProvider <- Đăng nhậpFactory Tôi có cái này, vậy làm cách nào tôi có thể sửa cái này

— ninjaXnado

0

Kịch bản của tôi có thể hơi mơ hồ nhưng nó có thể gây ra lỗi tương tự và ai đó có thể gặp phải nó, vì vậy:

Khi sử dụng dịch vụ bộ điều khiển $ để khởi tạo bộ điều khiển mới (dự kiến '$ scope' là đối số được chèn đầu tiên), tôi đã chuyển phạm vi cục bộ của bộ điều khiển mới vào tham số thứ hai của hàm $ control (). Điều này dẫn đến việc Angular cố gắng gọi một dịch vụ $ scope không tồn tại ( mặc dù trong một thời gian, tôi thực sự nghĩ rằng tôi đã xóa một số dịch vụ '$ scope' khỏi bộ nhớ cache của Angular ). Giải pháp là bọc phạm vi cục bộ trong một đối tượng cục bộ:

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

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

— Zac Seth
nguồn

0

Không có câu trả lời nào ở trên có tác dụng với tôi, có lẽ tôi đã làm sai hoàn toàn, nhưng là người mới bắt đầu, đó là những gì chúng tôi làm.

Tôi đã khởi tạo bộ điều khiển divđể có một danh sách:

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

Và sau đó sử dụng $routeProviderđể ánh xạ một URL tới cùng một bộ điều khiển. Ngay khi tôi gỡ bỏ ng-initbộ điều khiển làm việc với tuyến đường.

— jfs.csantos
nguồn

0

Tôi đã có vấn đề tương tự. Tôi đã sửa nó bằng cách sử dụng $('body').attr("ng-app", 'MyApp')thay vì<body ng-app="MyApp"> boostrap.

Bởi vì tôi đã làm

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

cho các yêu cầu kiến trúc.

— Jokerm
nguồn

0

Trong ứng dụng Ruby on Rails, tôi đã thực hiện như sau:

rake assets:precompile

Điều này đã được thực hiện trong môi trường 'phát triển', đã thu nhỏ Angular.js và đưa nó vào /public/assets/application.js tệp.

Loại bỏ các /public/assets/*tập tin đã giải quyết vấn đề cho tôi.

— Nigel Sheridan-Smith
nguồn

0

Tôi đã đối mặt với vấn đề tương tự ngày hôm nay và các vấn đề thực sự rất nhỏ

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

Nếu bạn quan sát khối trên, trong dòng đầu tiên, bạn sẽ quan sát thấy tôi đã chèn phạm vi $ do nhầm lẫn. Tôi loại bỏ sự phụ thuộc không mong muốn đó để giải quyết vấn đề.

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

— Rakesh Burbure
nguồn

0

Tôi đã gặp lỗi này sau khi tôi tạo một nhà máy mới và sử dụng nó trong một thành phần nhưng tôi không kiểm tra thông số kỹ thuật của các thành phần đó

vì vậy nếu thất bại trong các tệp kiểm tra (thông số kỹ thuật) của bạn

Bạn cần phải thêm beforeEach(module('YouNewServiceModule'));

— Basheer AL-MOMani
nguồn

-1

Một 'gotcha' khác: Tôi đã nhận được lỗi này khi tiêm $ timeout và phải mất vài phút để nhận ra tôi có khoảng trắng trong các giá trị mảng. Điều này sẽ không hoạt động:

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

Chỉ đăng trong trường hợp một số người khác có một lỗi ngớ ngẩn như thế này.

— Lukus
nguồn

-2

Trường hợp của tôi là đánh máy tinh ranh

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

hàm có 'c'!

— hạ cánh
nguồn