fornitore sconosciuto di js angular

Sto cercando di “personalizzare” l’esempio di mongolab per adattare la mia API REST. Ora mi sto imbattendo in questo errore e non sono sicuro di ciò che sto facendo male:

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) 

Questo è il mio controller:

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

e questo è il modulo:

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

Il tuo codice sembra buono, infatti funziona (a parte le chiamate stesse) quando copiato e incollato in un campione jsFiddle: http://jsfiddle.net/VGaWD/

Difficile dire cosa sta succedendo senza vedere un esempio più completo ma spero che il precedente jsFiddle sarà utile. Quello che sospetto è che non stai inizializzando la tua app con il modulo ‘productServices’ . Darebbe lo stesso errore, possiamo vederlo in un altro jsFiddle: http://jsfiddle.net/a69nX/1/

Se hai intenzione di lavorare con AngularJS e MongoLab, ti suggerirei di utilizzare un adattatore esistente per $ resource e MongoLab : https://github.com/pkozlowski-opensource/angularjs-mongolab Facilita gran parte del dolore con MongoLab, tu puoi vederlo in azione qui: http://jsfiddle.net/pkozlowski_opensource/DP4Rh/ Disclaimer! Sto mantenendo questo adattatore (scritto sulla base di esempi AngularJS) quindi sono ovviamente di parte qui.

Ho ricevuto quell’errore perché stavo passando un parametro errato alla definizione di fabbrica. Avevo:

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

Ha funzionato quando ho rimosso $scope e cambiato la definizione di fabbrica in:

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

Nel caso in cui sia necessario iniettare $scope , usare:

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

Ho appena avuto un problema simile. L’errore ha detto lo stesso nella domanda, ha cercato di risolverlo con la risposta di pkozlowski.opensource e Ben G, che sono entrambe corrette e buone risposte.

Il mio problema era effettivamente diverso con lo stesso errore:

nel mio codice HTML ho avuto l’inizializzazione come questa …

  

Un po ‘più in basso ho provato a fare qualcosa di simile:

 

Mi sono sbarazzato del primo … poi ha funzionato … ovviamente non è ansible inizializzare ng-app due o più volte. giusto.

Mi sono completamente dimenticato della prima “ng-app” e sono completamente frustrato. Forse questo aiuterà qualcun’altro un giorno …

Assicurati che la tua app.js principale includa i servizi da cui dipende. Per esempio:

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

La risposta di pkozlowski è corretta, ma nel caso in cui ciò accadesse a qualcun altro, ho avuto lo stesso errore dopo aver creato lo stesso modulo due volte per errore; la seconda definizione stava sovrascrivendo il fornitore del primo:

Ho creato il modulo facendo

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

poi un po ‘più in basso nello stesso file:

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

Il modo corretto per farlo è:

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

Nel mio caso, ho definito un nuovo fornitore, ad esempio, xyz

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

Quando si configura il provider di cui sopra, è necessario inserirlo con la stringa Provider aggiunta -> xyz diventa xyzProvider .

Ex:

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

Se si inserisce il fornitore sopra senza la stringa “Provider”, si otterrà l’errore simile in OP.

Alla fine del file JS per chiudere la funzione di fabbrica che avevo

});

invece di

}());

Per aggiungere la mia esperienza qui, stavo cercando di iniettare un servizio in una delle mie funzioni di configurazione del modulo. Questo paragrafo dei documenti che ho trovato spiega perché non funziona:

Durante il bootstrap dell’applicazione, prima che Angular decida di creare tutti i servizi, configura e crea un’istanza di tutti i provider. Chiamiamo questa la fase di configurazione del ciclo di vita dell’applicazione. Durante questa fase, i servizi non sono accessibili perché non sono stati ancora creati.

Il che significa che è ansible iniettare fornitori nelle funzioni module.config (…), ma non è ansible iniettare servizi, per cui è necessario attendere fino a module.run (…) o esporre un provider che si può iniettare nel modulo. config

Per me, questo errore è stato causato dall’esecuzione della versione ridotta della mia app angular. I documenti angolari suggeriscono un modo per ovviare a questo problema. Ecco la citazione pertinente che descrive il problema, e puoi trovare la soluzione suggerita nei documenti stessi qui :

Una nota su Minification Poiché Angular deduce le dipendenze del controllore dai nomi degli argomenti alla funzione di costruzione del controller, se si dovesse minimizzare il codice JavaScript per il controllore PhoneListCtrl, anche tutti gli argomenti delle sue funzioni sarebbero minimizzati e l’iniettore delle dipendenze non lo farebbe essere in grado di identificare correttamente i servizi.

Questo mi ha portato troppo tempo per rintracciare. Assicurati di aver controllato il tuo controller all’interno della direttiva.

 .directive('my_directive', ['injected_item', function (injected_item){ return { controller: ['DO_IT_HERE_TOO', function(DO_IT_HERE_TOO){ }] } } 

Spero possa aiutare

Dato che questo è il miglior risultato per “angularjs unknown provider” su Google in questo momento, ecco un altro trucco. Quando beforeEach() test unitari con Jasmine, assicurati di avere questa dichiarazione nella tua funzione beforeEach() :

 module('moduleName'); 

Altrimenti riceverai lo stesso errore nei tuoi test.

Ancora un altro caso in cui si verificherà questo errore, se il servizio è definito in un file javascript separato, assicurati di fare riferimento! Sì, lo so, errore da principiante.

Per me il problema era il carico pigro; Ho caricato il controller e il servizio in ritardo, quindi non erano disponibili al caricamento della pagina (e all’inizializzazione angular). L’ho fatto con un tag ui-if, ma è irrilevante. La soluzione era caricare il servizio con il caricamento della pagina già.

Ecco un altro scenario ansible in cui è ansible visualizzare questo errore:

Se usi Sublime Text 2 e il plugin angular, genererà stub come questo

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

si noti il ​​vuoto ” come il primo elemento dell’array dopo la stringa ‘utilFactory’. Se non hai alcuna dipendenza, rimuovila così è così:

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

Mi stavo dimenticando di iniettare il file che conteneva i miei servizi del tutto. Ricordati di farlo quando si inizializza il modulo dell’app:

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

Poiché questa domanda è il risultato di google, aggiungerò un’altra ansible cosa alla lista.

Se il modulo che stai utilizzando ha un errore sul wrapper di dipendenza dipendenza, fornirà lo stesso risultato. Ad esempio, copia e incolla moduli da Internet può fare affidamento su underscore.js e provare a iniettare con ‘_’ nel di wrapper. Se il carattere di sottolineatura non esiste nei fornitori di dipendenze del progetto, quando il controller tenta di fare riferimento al factory del modulo, otterrà “provider sconosciuto” per la fabbrica nel log della console del browser.

Il problema per me era che c’erano dei nuovi file javascript che ho creato facendo riferimento al servizio, ma Chrome ha visto solo la versione precedente. Un CTRL + F5 lo ha risolto per me.

Nel mio caso, ho usato una funzione anonima come wrapper per il modulo angular, in questo modo:

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

Dopo aver chiuso la parentesi, ho dimenticato di chiamare la funzione anonima aprendo e chiudendo nuovamente le parentesi come sopra.

Ho ottenuto un errore “provider sconosciuto” relativo a angular-mocks (ngMockE2E) durante la compilazione del mio progetto con Grunt. Il problema era che le angock-mock non possono essere minimizzate quindi ho dovuto rimuoverlo dalla lista dei file minificati.

Dopo aver gestito anche questo errore, posso supportare questo elenco di risposte con il mio caso.

È allo stesso tempo semplice e stupido (forse non stupido per principianti come me, ma sì per esperti), il riferimento allo script di angular.min.js deve essere il primo nel tuo elenco di script nella pagina html.

Questo funziona:

    

Questo no:

    

Avviso su angular.min.js.

Spero che aiuti chiunque !! 🙂

Il mio problema era con Yeoman, usando (in maiuscolo):

 yo angular:factory Test 

File creati (non ricapitalizzati):

 app/scripts/services/test.js 

ma il file index.html incluso (in lettere maiuscole):

  

Spero che questo aiuti qualcuno.

Ancora un’altra possibilità.

Avevo unknown Provider < - <- nameOfMyService . L'errore è stato causato dalla seguente syntax:

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

Angular stava cercando la dipendenza.

Il mio scenario potrebbe essere un po ‘oscuro, ma può causare lo stesso errore e qualcuno potrebbe provarlo, quindi:

Quando si utilizza il servizio $ controller per creare un’istanza di un nuovo controller (che si aspettava “$ scope” come argomento per il primo iniettato) stavo passando l’ambito locale del nuovo controller nel secondo parametro della funzione $ controller (). Ciò ha indotto Angular a tentare di invocare un servizio $ scope che non esiste ( sebbene, per un po ‘, in realtà ho pensato che avrei cancellato il servizio’ $ scope ‘dalla cache di Angular ). La soluzione è racchiudere l’ambito locale in un object locale:

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

Nessuna delle risposte sopra ha funzionato per me, forse stavo facendo completamente male, ma come principiante è quello che facciamo.

Stavo inizializzando il controller in un div in modo da avere una lista:

  

E poi usando $routeProvider per mappare un URL allo stesso controller. Non appena ho rimosso ng-init il controller ha funzionato con il percorso.

Ho avuto lo stesso problema. Ho risolto il problema usando $('body').attr("ng-app", 'MyApp') invece di su boostrap.

Perché l’ho fatto

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

per i requisiti di architettura.

Nella mia app Ruby on Rails avevo fatto quanto segue:

 rake assets:precompile 

Ciò è stato fatto nell’ambiente di “sviluppo”, che ha limitato Angular.js e incluso nel file /public/assets/application.js .

La rimozione dei file /public/assets/* risolto il problema per me.

Ho affrontato un problema simile oggi e le questioni erano davvero molto piccole

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

Se osservate il blocco precedente, nella prima riga si osserverà per errore l’ambito $ iniettato che è errato. Ho rimosso quella dipendenza indesiderata per risolvere il problema.

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

Un altro “pasticcio”: stavo ottenendo questo errore iniettando un timeout di $, e ci sono voluti alcuni minuti per realizzare che avevo spazi bianchi nei valori dell’array. Questo non funzionerà:

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

Pubblicare nel caso in cui qualcun altro ha un errore stupido come questo.

Il mio caso era typescript

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

la funzione ha una ‘c’!