fornitore angolare js sconosciuto

152

Sto cercando di "personalizzare" l'esempio mongolab per adattarlo alla mia API REST. Ora sto incontrando questo errore e non sono sicuro di cosa sto facendo di sbagliato:

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;
    }]);
angularjs 
— Stefan Ernst
fonte
Questo errore indica che angolare non è a conoscenza della fabbrica del prodotto, assicurarsi innanzitutto che JS per questo servizio sia di riferimento. Inoltre, quando si dichiarano i moduli assicurarsi di definire esplicitamente le dipendenze perché quando i file sono ridotti al minimo questo errore si presenta anche a causa della modifica del nome. Per maggiori informazioni, guarda questo articolo: ozkary.com/2015/11/…
— ozkary

Risposte:

130

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

Difficile dire cosa sta succedendo senza vedere un esempio più completo, ma spero che il jsFiddle sopra sia utile. Ciò di cui sospetto è che non stai inizializzando l'app con il modulo "productServices" . Darebbe lo stesso errore, lo possiamo vedere 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 lavorando con MongoLab, tu può vederlo in azione qui: http://jsfiddle.net/pkozlowski_opensource/DP4Rh/ Disclaimer! Sto mantenendo questo adattatore (scritto sulla base di esempi AngularJS), quindi ovviamente sono di parte.

— pkozlowski.opensource
fonte
Ho lo stesso problema e questo non ha risolto il mio problema. Ricupero davvero i dati ... Tranne questo messaggio di errore, penseresti che tutto funzionasse bene. Non sto usando ng-app nell'elemento body, ma sto eseguendo il bootstrap in questo modo: angular.element (document) .ready (function () {angular.bootstrap (document, ['reportServices']);});
— Tom,
17
Ciao ragazzi, questo è un po 'imbarazzante. Ho esattamente lo stesso problema. Ma non riesco a individuare la differenza tra i 2 jsFiddles. Ogni suggerimento su dove cercare esattamente è molto apprezzato.
— schacki,
4
@schacki, La differenza tra i violini si trova nella scheda informazioni. Uno di loro ha un corpo con <body ng-app="productServices">e l'altro ha <body ng-app="">.
— Vineet Reynolds,
E dov'è la scheda informazioni? :)
— Aleks,
3
Sembra che la scheda informazioni sia ora la Fiddle Optionsscheda a destra
— Gangstead
40

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

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

Ha funzionato quando ho rimosso $scopee modificato la definizione di fabbrica in:

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

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

myModule.factory('myService', function($rootScope, $http)...
— bresleveloper
fonte
32

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 risposte corrette e buone.

Il mio problema era effettivamente diverso con lo stesso errore:

nel mio codice HTML ho avuto l'inizializzazione in questo modo ...

<html ng-app>

Un po 'più in basso ho provato a fare qualcosa del genere:

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

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

Mi sono completamente dimenticato della prima "ng-app" e sono rimasto totalmente frustrato. Forse questo aiuterà qualcuno un giorno ...

— Preexo
fonte
2
Ho avuto un problema simile ma nel mio caso avere ng-controller specificato nel div era il colpevole di un controller che fa riferimento al servizio. Sembra che Angular non sapesse come risolvere il servizio quando analizzava la vista.
— Hector Correa,
25

Assicurati che il tuo principale app.jsincluda i servizi da cui dipende. Per esempio:

/* App Module */
angular.module('myApp', ['productServices']). 
.....
— BeginnerAngularJs
fonte
1
Se non sbaglio, in tal caso productServicesdovrebbe essere un modulo, quindi è irrilevante ciò che è all'interno di tale modulo (servizi o meno).
— Greenoldman,
17

La risposta di pkozlowski è corretta, ma nel caso ciò accada 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 di farlo è: 

angular.module('MyService'...
).factory(...).value('version','0.1');
— Ben G
fonte
11

Nel mio caso, ho definito un nuovo provider, diciamo, xyz

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

Quando dovevi configurare il provider sopra, devi iniettarlo con una Providerstringa aggiunta -> xyzdiventa xyzProvider.

Ex:

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

Se si inietta il provider sopra senza la stringa "Provider", si otterrà l'errore simile in OP.

— manikanta
fonte
8

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

});

invece di

}());

— Milo P
fonte
1
Per il mio progetto di solito usiamo})();
— mrOak il
5

Mi ci è voluto troppo tempo per rintracciarlo. Assicurati di minare il controller all'interno della tua direttiva.

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

  return {

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

    }]
  }
}

spero che aiuti

— pk1m
fonte
5

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

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

Ciò significa che è possibile iniettare provider nelle funzioni module.config (...), ma non è possibile iniettare servizi, per questo è necessario attendere fino a module.run (...) o esporre un provider che è possibile iniettare nel modulo. config

— Stewart A
fonte
4

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

Una nota sulla minimizzazione Poiché Angular attribuisce le dipendenze del controller dai nomi degli argomenti alla funzione di costruzione del controller, se si dovesse minimizzare il codice JavaScript per il controller PhoneListCtrl, anche tutti i suoi argomenti di funzione verrebbero minimizzati e l'iniettore di dipendenza non lo farebbe essere in grado di identificare correttamente i servizi.

— Sasha
fonte
3

Poiché questo è il miglior risultato per "fornitore sconosciuto angularjs" su Google in questo momento, ecco un altro gotcha. Quando esegui test di unità con Jasmine, assicurati di avere questa affermazione nella tua beforeEach()funzione:

module('moduleName');

Altrimenti otterrai questo stesso errore nei tuoi test.

— roufamatic
fonte
3

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

— Jason
fonte
2

Mi stavo dimenticando di iniettare il file che conteneva del tutto i miei servizi. Ricordati di farlo quando inizializzi il tuo modulo app:

angular.module('myApp', ['myApp.services', ... ]);
— jorisw
fonte
2

Nel mio caso, ho usato una funzione anonima come wrapper per il modulo angolare, 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.

— Emanuele Bellini
fonte
so che hai risposto 4 anni fa, ma oggi mi ha aiutato, grazie.
— Legolas,
1

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

— Gonfi den Tschal
fonte
1

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

Se usi Sublime Text 2 e il plug-in angolare, genererà stub come questo

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

        }
    }
]);

notare il vuoto '' come primo elemento dell'array dopo la stringa 'utilFactory'. Se non hai dipendenze, rimuovile quindi è così:

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

        }
    }
]);
— dustin.schultz
fonte
1

Poiché questa domanda è il miglior risultato di Google, aggiungerò un'altra cosa possibile all'elenco.

Se il modulo che si sta utilizzando presenta un errore nel wrapper di iniezione delle dipendenze, fornirà lo stesso risultato. Ad esempio, i moduli di copia e incolla da Internet possono fare affidamento su underscore.js e tentare di iniettare con '_' nel di wrapper. Se il carattere di sottolineatura non esiste nei provider di dipendenze del progetto, quando il controller tenta di fare riferimento alla factory del modulo, nel log della console del browser verrà visualizzato il "provider sconosciuto" per la factory.

— user1082202
fonte
1

Il problema per me era che c'erano alcuni nuovi file JavaScript creati da me che facevano riferimento al servizio, ma Chrome ha visto solo la versione precedente. Un CTRL + F5 ha risolto il problema per me.

— mortey
fonte
0

Durante la compilazione del mio progetto con Grunt ho riscontrato un errore "provider sconosciuto" correlato a angular-mock (ngMockE2E). Il problema era che i mock angolari non possono essere minimizzati, quindi ho dovuto rimuoverlo dall'elenco dei file minimizzati.

— Rusty Fausak
fonte
0

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 i principianti come me, ma sì per gli esperti), il riferimento allo script angular.min.js deve essere il primo nel tuo elenco di script nella pagina html.

Questo funziona:

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

Questo non:

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

Avviso su angular.min.js.

Spero che aiuti chiunque !! :)

— Joe Lewis
fonte
0

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

yo angular:factory Test

File creati (non capitalizzati): 

app/scripts/services/test.js

ma il file index.html includeva (in maiuscolo):

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

Spero che questo aiuti qualcuno.

— Corey Rothwell
fonte
0

Ancora un'altra possibilità.

Ho avuto unknown Provider <- <- nameOfMyService. L'errore è stato causato dalla seguente sintassi:

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

Angular stava cercando la ''dipendenza.

— Hugo Wood
fonte
Errore: [$ injector: unpr] Fornitore sconosciuto: LoginFactoryProvider <- LoginFactory ho questo, quindi come posso risolvere questo
— ninjaXnado
0

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

Quando utilizzavo il servizio $ controller per creare un'istanza di un nuovo controller (che si aspettava "$ scope" come primo argomento iniettato) passavo l'ambito locale del nuovo controller nel secondo parametro della funzione $ controller (). Ciò ha portato Angular a cercare di invocare un servizio $ scope che non esiste ( anche se, per un po ', in realtà ho pensato che avrei cancellato il servizio "$ scope" dalla cache di Angular ). La soluzione è avvolgere l'ambito locale in un oggetto locale:

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

// Good:
$controller('myController, {$scope: newScope});
— Zac Seth
fonte
0

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

Stavo inizializzando il controller in diva per avere un elenco:

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

E quindi usando $routeProviderper mappare un URL allo stesso controller. Non appena ho rimosso ng-initil controller ha funzionato con il percorso.

— jfs.csantos
fonte
0

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

Perché l'ho fatto

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

per i requisiti di architettura.

— Jokerm
fonte
0

Nella mia app Ruby on Rails, avevo fatto quanto segue:

rake assets:precompile

Ciò è stato fatto nell'ambiente di "sviluppo", che aveva minimizzato Angular.js e lo aveva incluso nel /public/assets/application.jsfile.

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

— Nigel Sheridan-Smith
fonte
0

Ho affrontato problemi simili oggi e i problemi erano davvero molto piccoli

 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 osservi il blocco sopra, nella prima riga osserverai che ho iniettato $ scope per errore che non è corretto. 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);
            }
        }
    }
}
});
— Rakesh Burbure
fonte
0

Ho avuto questo errore dopo aver creato una nuova fabbrica e averlo usato all'interno di un componente ma non ho controllato le specifiche di tali componenti

quindi se l'errore nei file di test (specifiche)

devi aggiungere beforeEach(module('YouNewServiceModule'));

— Basheer AL-MOMANI
fonte
-1

Un altro 'gotcha': stavo ottenendo questo errore durante l'iniezione di $ timeout e ci sono voluti alcuni minuti per rendermi conto che avevo spazio bianco 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 abbia un errore sciocco come questo.

— Lukus
fonte
-2

Il mio caso era una dattiloscritta

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

la funzione ha una 'c'!

— atterrato
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.