açısal js bilinmeyen sağlayıcı


152

Ben kendi REST API uyacak mongolab örneği "özelleştirmek" çalışıyorum. Şimdi bu hatayla karşılaşıyorum ve yanlış yaptığımdan emin değilim:

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)

Bu benim denetleyicim:

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

ve bu modül:

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

      return Product;
    }]);

Bu hata, açısalın ürün fabrikası hakkında bilgi sahibi olmadığını gösterir, bu hizmet için JS'nin önce referans olduğundan emin olun. Ayrıca, modülleri bildirirken, bağımlılıkları açıkça tanımladığınızdan emin olun çünkü dosyalar simge durumuna küçültüldüğünde, adın değiştirilmesinden dolayı bu hata da ortaya çıkacaktır. Daha fazla bilgi için bu makaleye bakın :: ozkary.com/2015/11/…
ozkary

Yanıtlar:


130

Kodunuz iyi görünüyor, aslında jsFiddle: http://jsfiddle.net/VGaWD/ kopyalandığında ve yapıştırıldığında (çağrıların dışında) çalışıyor

Daha eksiksiz bir örnek görmeden neler olduğunu söylemek zor ama umarım yukarıdaki jsFiddle yardımcı olacaktır. Şüphelendiğim, uygulamanızı 'productServices' modülüyle başlatmamanız . Aynı hatayı verir, bunu başka bir js'de görebilirizFiddle: http://jsfiddle.net/a69nX/1/

Eğer angularjs ile işe planlıyoruz ve MongoLab Eğer ben $ kaynak ve MongoLab için varolan adaptörü kullanarak öneririm : https://github.com/pkozlowski-opensource/angularjs-mongolab Size, MongoLab ile çalışan ağrının çok kolaylaştırır eylem burada görebilirsiniz: http://jsfiddle.net/pkozlowski_opensource/DP4Rh/ Yasal Uyarı! Bu bağdaştırıcıyı koruyorum (AngularJS örneklerine dayanarak yazılmıştır) bu yüzden burada önyargılıyım.


Aynı problemim var ve bu sorunumu çözmedi. Aslında verileri geri alıyorum ... Bu hata mesajı dışında her şeyin yolunda gittiğini düşünürdünüz. Gövde öğesinde ng-app kullanmıyorum, öyle önyükleme yapıyorum: angular.element (document) .ready (function () {angular.bootstrap (document, ['reportServices']);});
Tom

17
Merhaba arkadaşlar, bu biraz utanç verici. Aynı problemim var. Ama 2 jsFiddles arasındaki farkı göremiyorum. Tam olarak nereye bakacağınıza dair herhangi bir ipucu çok takdir edilmektedir.
schacki

4
@schacki, Kemanlardaki fark bilgi sekmesinde bulunabilir. Birinde bir beden var <body ng-app="productServices">, diğerinde var <body ng-app="">.
Vineet Reynolds

Bilgi sekmesi nerede? :)
Aleks

3
Bilgi sekmesi artık Fiddle Optionssağdaki sekme gibi görünüyor
Gangstead

40

Bu hatayı aldım çünkü fabrika tanımına yanlış bir parametre geçiyordum. Sahiptim:

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

$scopeFabrika tanımını kaldırdığımda ve şu şekilde değiştirdiğimde işe yaradı :

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

Enjekte etmeniz gerekiyorsa, şunları $scopekullanın:

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

32

Ben de benzer bir sorun yaşadım. Hata aynı soruda, her ikisi de doğru ve iyi cevaplar olan pkozlowski.opensource ve Ben G cevabı ile çözmeye çalıştı.

Sorunum aynı hatayla gerçekten farklıydı:

HTML kodumda böyle bir başlatma yaptım ...

<html ng-app>

Biraz daha aşağıda böyle bir şey yapmaya çalıştım:

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

İlkinden kurtuldum ... sonra işe yaradı ... açıkçası ng-app'ı iki veya daha fazla kez başlatamazsınız. yeterince adil.

Tamamen ilk "ng-app" unutmuş ve tamamen sinirli var. Belki bu bir gün birine yardım edecek ...


2
Ben de benzer bir sorun vardı ama benim durumda div belirtilen ng-denetleyici olması hizmet referans bir denetleyici suçlu oldu. Angular, görünümü ayrıştırdığında hizmeti nasıl çözeceğini bilmiyor gibi görünüyor.
Hector Correa

25

Ana ünitenizin app.jsbağlı olduğu hizmetleri içerdiğinden emin olun . Örneğin:

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

1
Yanılmıyorsam, bu durumda productServicesbir modül olmalı, bu yüzden bu modülün içinde ne olduğu önemsizdir (hizmetler ya da değil).
greenoldman

17

pkozlowski'nin cevabı doğrudur, ancak bunun başka birine olması durumunda, aynı modülü yanlışlıkla iki kez oluşturduktan sonra aynı hatayla karşılaştım; ikinci tanım birincinin sağlayıcısını geçersiz kılıyordu:

Modülü yaparak

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

sonra aynı dosyada biraz daha aşağı inin:

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

Bunu yapmanın doğru yolu:

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

11

Benim durumumda, yeni bir sağlayıcı tanımladım, diyelim ki, xyz

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

Yukarıdaki sağlayıcıyı yapılandırdığınızda, Providereklenen dize ile enjekte etmeniz gerekir -> xyzolur xyzProvider.

Ör:

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

Yukarıdaki sağlayıcıyı 'Sağlayıcı' dizesi olmadan enjekte ederseniz, benzer hatayı OP'de alırsınız.



5

Bu beni takip etmek için çok uzun sürdü. Denetleyicinizi direktifinizde minimize ettiğinizden emin olun.

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

  return {

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

    }]
  }
}

umarım yardımcı olur


5

Burada kendi deneyimimi eklemek için modül yapılandırma işlevlerimden birine bir servis enjekte etmeye çalışıyordum. Sonunda bulduğum dokümanlardaki bu paragraf bunun neden çalışmadığını açıklıyor:

Uygulama önyüklemesi sırasında, Angular tüm hizmetleri oluşturmaya başlamadan önce, tüm sağlayıcıları yapılandırır ve başlatır. Buna uygulama yaşam döngüsünün yapılandırma aşaması diyoruz. Bu aşamada, henüz oluşturulmadığı için hizmetlere erişilemez.

Yani, module.config (...) işlevlerine sağlayıcılar enjekte edebilirsiniz, ancak hizmetleri enjekte edemezsiniz, bunun için module.run (...) 'a kadar beklemeniz veya modüle enjekte edebileceğiniz bir sağlayıcıyı açmanız gerekir. yapılandırma


4

Benim için, bu hata açısal uygulamamın küçültülmüş sürümünü çalıştırmaktan kaynaklandı. Açısal dokümanlar bu sorunu çözmek için bir yol önerir. İşte sorunu açıklayan ilgili alıntı ve önerilen çözümü dokümanların kendisinde burada bulabilirsiniz :

Küçültme ile İlgili Bir Not Açısal, denetleyicinin bağımsız değişkenlerin adlarını denetleyicinin yapıcı işlevine bozduğundan, PhoneListCtrl denetleyicisinin JavaScript kodunu küçültmeniz durumunda, tüm işlev bağımsız değişkenleri de küçültülecek ve bağımlılık enjektörü Hizmetleri doğru tanımlayabilme.


3

Bu, şu anda Google'daki "angularjs unknown sağlayıcı" için en iyi sonuç olduğundan, işte başka bir gotcha. Jasmine ile birim testi yaparken, beforeEach()işlevinizde şu ifadeye sahip olduğunuzdan emin olun :

module('moduleName'); 

Aksi takdirde aynı hatayı testlerinizde alırsınız.


3

Hizmetin ayrı bir javascript dosyasında tanımlanmışsa, bu hatanın ortaya çıkacağı başka bir durum, başvurduğunuzdan emin olun! Evet, biliyorum, çaylak hatası.


2

Hizmetlerimi tamamen elinde tutan dosyayı enjekte etmeyi unutuyordum. Uygulama modülünüzü başlatırken bunu yapmayı unutmayın:

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

2

Benim durumumda, açısal modül için bir sarıcı olarak anonim bir işlev kullandım, şöyle:

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

Parantez kapatıldıktan sonra, yukarıdaki gibi parantezleri tekrar açıp kapatarak anonim işlevi çağırmayı unuttum.


4 yıl önce cevapladığını biliyorum, ama bugün bana yardımcı oldu, teşekkürler.
Legolas

1

Benim için sorun tembel yükleme idi; Denetleyicimi ve hizmetimi geç yükledim, bu nedenle sayfa yükünde (ve Açısal başlatma) kullanılamıyorlardı. Bunu bir ui-if etiketi ile yaptım, ama bu alakasız. Çözüm, hizmeti sayfa yüküyle yüklemekti.


1

Bu hatayı görebileceğiniz başka bir olası senaryo:

Sublime Text 2 ve açısal eklenti kullanırsanız, bunun gibi saplamalar oluşturur

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

        }
    }
]);

'utilFactory' dizesinden sonraki dizinin ilk öğesi olarak boş '' öğesine dikkat edin. Herhangi bir bağımlılığınız yoksa, bunu şu şekilde kaldırın:

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

        }
    }
]);

1

Bu soru en iyi google sonucu olduğundan, listeye başka bir şey ekleyeceğim.

Kullandığınız modülün bağımlılık enjeksiyon sarıcısında bir hatası varsa, aynı sonucu verecektir. Örneğin, internetten kopyala ve yapıştır modülleri underscore.js'ye güvenebilir ve di paketinde '_' ile enjeksiyon yapmaya çalışabilir. Proje bağımlılığı sağlayıcılarınızda alt çizgi yoksa, denetleyiciniz modülünüzün fabrikasına başvurmaya çalıştığında, tarayıcınızın konsol günlüğünde fabrikanız için 'bilinmeyen sağlayıcı' alır.


1

Benim için sorun, hizmete atıfta bulunduğum ve Chrome'un yalnızca eski sürümü gördüğü oluşturduğum bazı yeni javascript dosyaları olmasıydı. Bir CTRL + F5 bunu benim için düzeltti.


0

Projemi Grunt ile derlerken açısal alaylarla (ngMockE2E) ilgili bir "bilinmeyen sağlayıcı" hatası aldım. Sorun, küçültülmüş dosyalar listesinden kaldırmak zorunda açısal alay küçültülemez oldu.


0

Bu hatayı da ele aldıktan sonra, kendi cevaplarımla bu cevap listesini destekleyebilirim.

Aynı zamanda basit ve aptal (belki benim gibi yeni başlayanlar için aptal değil, ancak uzmanlar için evet), angular.min.js için komut dosyası başvurusu, html sayfasındaki komut dosyaları listenizdeki ilk başvuru olmalıdır.

Bu çalışıyor:

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

Bu değil:

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

Angular.min.js ile ilgili uyarı.

Umarım herkese yardımcı olur !! :)


0

Benim problemim Yeoman'la (büyük harfle) kullanmaktı:

yo angular:factory Test

Yapılan dosyalar (büyük harf kullanılmamış):

app/scripts/services/test.js

ancak index.html dosyası dahil (büyük harfle yazılmıştır):

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

Umarım bu birine yardımcı olur.


0

Yine başka bir olasılık.

Ben vardı unknown Provider <- <- nameOfMyService. Hata, aşağıdaki sözdiziminden kaynaklandı:

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

Açısal ''bağımlılığı arıyordu .


Hata: [$ injector: unpr] Bilinmeyen sağlayıcı: LoginFactoryProvider <- LoginFactory bunu ve bunu nasıl düzeltebilirim
ninjaXnado

0

Benim senaryom biraz belirsiz olabilir, ancak aynı hataya neden olabilir ve birisi bunu yaşayabilir, bu yüzden:

Yeni bir denetleyici başlatmak için $ denetleyicisi hizmetini kullanırken (ilk enjekte edilen argüman olarak '$ scope' bekleniyordu) Yeni denetleyicinin yerel kapsamını $ controller () işlevinin ikinci parametresine geçiriyordum. Bu, Angular'ın var olmayan bir $ kapsam hizmetini çağırmaya çalışmasına neden olur ( yine de, bir süre için, '$ scope' hizmetini Angular'ın önbelleğinden nasıl sildiğimi düşündüm ). Çözüm, yerel kapsamı bir locals nesnesine sarmaktır:

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

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

0

Yukarıdaki cevapların hiçbiri benim için işe yaramadı, belki de tamamen yanlış yapıyordum, ama bir acemi olarak yaptığımız şey bu.

divBir liste olması için bir denetleyici başlatıyordum :

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

Ve sonra $routeProviderbir URL'yi aynı denetleyiciye eşlemek için kullanın. ng-initKontrolörü kaldırır çıkarmaz rota ile çalıştı.


0

Aynı problemim vardı. Bunu boostrap $('body').attr("ng-app", 'MyApp')yerine kullanarak <body ng-app="MyApp">düzelttim.

Çünkü yaptım

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

mimari gereksinimler için.


0

Ruby on Rails uygulamamda aşağıdakileri yapmıştım:

rake assets:precompile

Bu, Angular.js'yi küçülten ve /public/assets/application.jsdosyaya ekleyen 'geliştirme' ortamında yapıldı .

/public/assets/*Dosyaları kaldırmak benim için sorunu çözdü.


0

Bugün benzer bir sorunla karşılaştım ve sorunlar gerçekten çok küçüktü

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

Yukarıdaki bloğu gözlemlerseniz, ilk satırda yanlışlıkla yanlış bir şekilde $ kapsamı enjekte ettiğimi göreceksiniz. Sorunu çözmek için istenmeyen bağımlılığı kaldırdım.

 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

Yeni bir fabrika oluşturduktan ve bir bileşen içinde kullandıktan sonra bu hatayla karşılaştım, ancak bu bileşenlerin özelliklerini kontrol etmedim

yani (spec) test dosyalarınızdaki arıza

eklemelisin beforeEach(module('YouNewServiceModule'));


-1

Başka bir 'gotcha': $ timeout enjekte ederek bu hatayı alıyordum ve dizi değerlerinde boşluk olduğunu fark etmek birkaç dakika sürdü. Bu işe yaramaz:

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

Başkalarının böyle aptalca bir hata olması durumunda yayınlamak.


-2

Benim durum oldu tehlikeli yazarak

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

işlevi bir 'c' var!

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.