Winkel js unbekannter Anbieter

152

Ich versuche, das Mongolab-Beispiel an meine eigene REST-API anzupassen. Jetzt stoße ich auf diesen Fehler und bin mir nicht sicher, was ich falsch mache:

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)

Das ist mein Controller:

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

und das ist das Modul:

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

      return Product;
    }]);

angularjs Stefan Ernst
quelle

Dieser Fehler weist darauf hin, dass Angular nichts über die Produktfabrik weiß. Stellen Sie sicher, dass der JS für diesen Service zuerst als Referenz dient. Achten Sie auch beim Deklarieren der Module darauf, Abhängigkeiten explizit zu definieren, da dieser Fehler bei der Minimierung von Dateien auch aufgrund einer Verfälschung des Namens auftreten würde. Weitere Informationen finden Sie in diesem Artikel :: ozkary.com/2015/11/…

ozkary

130

Ihr Code sieht gut aus, tatsächlich funktioniert er (abgesehen von den Aufrufen selbst), wenn er in ein Beispiel kopiert und eingefügt wird. JsFiddle: http://jsfiddle.net/VGaWD/

Schwer zu sagen, was los ist, ohne ein vollständigeres Beispiel zu sehen, aber ich hoffe, dass die obige jsFiddle hilfreich sein wird. Ich vermute, dass Sie Ihre App nicht mit dem Modul 'productServices' initialisieren . Es würde den gleichen Fehler geben, wir können dies in einem anderen jsFiddle sehen: http://jsfiddle.net/a69nX/1/

Wenn Sie planen, mit AngularJS und MongoLab zu arbeiten, würde ich empfehlen, einen vorhandenen Adapter für die $ resource und MongoLab zu verwenden : https://github.com/pkozlowski-opensource/angularjs-mongolab Es erleichtert Ihnen die Arbeit mit MongoLab erheblich kann es hier in Aktion sehen: http://jsfiddle.net/pkozlowski_opensource/DP4Rh/ Haftungsausschluss! Ich pflege diesen Adapter (geschrieben basierend auf AngularJS-Beispielen), daher bin ich hier offensichtlich voreingenommen.

pkozlowski.opensource
quelle

Ich habe das gleiche Problem und dies hat mein Problem nicht gelöst. Ich bekomme tatsächlich Daten zurück ... Mit Ausnahme dieser Fehlermeldung würden Sie denken, dass alles gut funktioniert hat. Ich verwende ng-app jedoch nicht im body-Element, sondern bootstrapping wie folgt: angle.element (document) .ready (function () {angular.bootstrap (document, ['reportServices']);});

Tom

17

Hallo Leute, das ist ein bisschen peinlich. Ich habe genau das gleiche Problem. Aber ich kann den Unterschied zwischen den 2 jsFiddles nicht erkennen. Jeder Hinweis, wo genau gesucht werden muss, ist sehr willkommen.

Schacki

4

@schacki, Der Unterschied in den Geigen kann auf der Info-Registerkarte gefunden werden. Einer von ihnen hat einen Körper mit <body ng-app="productServices">und der andere hat <body ng-app="">.

Vineet Reynolds

Und wo ist der Info-Tab? :)

Aleks

3

Sieht aus wie die Info-Registerkarte ist jetzt die Fiddle OptionsRegisterkarte auf der rechten Seite

Gangstead

40

Ich habe diesen Fehler erhalten, weil ich einen falschen Parameter an die Factory-Definition übergeben habe. Ich hatte:

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

Es hat funktioniert, als ich das entfernt $scopeund die Factory-Definition geändert habe in:

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

Wenn Sie injizieren müssen $scope, verwenden Sie:

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

Bresleveloper
quelle

32

Ich hatte gerade ein ähnliches Problem. Der Fehler sagte dasselbe in der Frage, versuchte ihn mit der Antwort von pkozlowski.opensource und Ben G zu lösen, die beide richtige und gute Antworten sind.

Mein Problem war in der Tat anders mit dem gleichen Fehler:

In meinem HTML-Code hatte ich die Initialisierung so ...

<html ng-app>

Etwas weiter unten habe ich versucht, so etwas zu tun:

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

Ich habe die erste losgeworden ... dann hat es funktioniert ... offensichtlich kann man ng-app nicht zweimal oder mehrmals initialisieren. Meinetwegen.

Ich habe die erste "ng-App" total vergessen und war total frustriert. Vielleicht hilft das jemandem eines Tages ...

Preexo
quelle

2

Ich hatte ein ähnliches Problem, aber in meinem Fall war die Angabe des ng-Controllers im div der Schuldige für einen Controller, der auf den Dienst verweist. Es scheint, dass Angular nicht wusste, wie der Dienst aufgelöst werden kann, als die Ansicht analysiert wurde.

Hector Correa

25

Stellen Sie sicher, dass Ihr Hauptgerät app.jsdie Dienste enthält, von denen es abhängt. Beispielsweise:

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

BeginnerAngularJs
quelle

1

Wenn ich mich nicht irre, productServicessollte es sich in einem solchen Fall um ein Modul handeln, daher ist es unerheblich, was sich in einem solchen Modul befindet (Dienste oder nicht).

Greenoldman

17

Die Antwort von pkozlowski ist richtig, aber für den Fall, dass dies jemand anderem passiert, hatte ich denselben Fehler, nachdem ich versehentlich dasselbe Modul zweimal erstellt hatte. Die zweite Definition hatte Vorrang vor dem Anbieter der ersten:

Ich habe das Modul dabei erstellt

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

dann etwas weiter unten in derselben Datei:

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

Der richtige Weg, dies zu tun, ist:

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

Ben G.
quelle

11

In meinem Fall habe ich einen neuen Anbieter definiert, z. xyz

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

Wenn Sie den oben genannten Anbieter konfigurieren möchten, müssen Sie ihm eine Providerangehängte Zeichenfolge hinzufügen -> xyzwird xyzProvider.

Ex:

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

Wenn Sie den obigen Provider ohne die Zeichenfolge 'Provider' einfügen, wird im OP ein ähnlicher Fehler angezeigt.

Manikanta
quelle

8

Am Ende der JS-Datei, um die Factory-Funktion zu schließen, die ich hatte

});

anstatt

}());

Milo P.
quelle

1

Für mein Projekt verwenden wir normalerweise})();

mrOak

5

Ich habe viel zu lange gebraucht, um sie aufzuspüren. Stellen Sie sicher, dass Sie Ihren Controller innerhalb Ihrer Direktive minimieren.

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

  return {

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

    }]
  }
}

hoffentlich hilft das

pk1m
quelle

5

Um meine eigenen Erfahrungen hier hinzuzufügen, habe ich versucht, einen Dienst in eine meiner Modulkonfigurationsfunktionen einzufügen. Dieser Absatz aus den Dokumenten, die ich schließlich gefunden habe, erklärt, warum das nicht funktioniert:

Während des Anwendungs-Bootstraps werden alle Anbieter konfiguriert und instanziiert, bevor Angular alle Dienste erstellt. Wir nennen dies die Konfigurationsphase des Anwendungslebenszyklus. Während dieser Phase sind Dienste nicht zugänglich, da sie noch nicht erstellt wurden.

Das heißt, Sie können Anbieter in die Funktionen von module.config (...) einfügen, aber Sie können keine Dienste einfügen. Dazu müssen Sie warten, bis module.run (...) ausgeführt wird, oder einen Anbieter verfügbar machen, den Sie in das Modul einfügen können. config

Stewart A.
quelle

4

Für mich wurde dieser Fehler durch das Ausführen der minimierten Version meiner Winkel-App verursacht. Angular Docs schlagen eine Möglichkeit vor, dies zu umgehen. Hier ist das relevante Zitat, das das Problem beschreibt. Die vorgeschlagene Lösung finden Sie in den Dokumenten selbst hier :

Hinweis zur Minimierung Da Angular die Abhängigkeiten des Controllers von den Namen der Argumente zur Konstruktorfunktion des Controllers ableitet, würden beim Minimieren des JavaScript-Codes für den PhoneListCtrl-Controller auch alle Funktionsargumente minimiert und der Abhängigkeitsinjektor nicht in der Lage sein, Dienste korrekt zu identifizieren.

Sasha
quelle

3

Da dies derzeit das Top-Ergebnis für "anglejs unbekannter Anbieter" bei Google ist, ist hier ein weiteres Problem. Stellen Sie beim Testen von Einheiten mit Jasmine sicher, dass Sie diese Aussage in Ihrer beforeEach()Funktion haben:

module('moduleName');

Andernfalls wird bei Ihren Tests derselbe Fehler angezeigt.

roufamatisch
quelle

3

Ein weiterer Fall, in dem dieser Fehler auftritt: Wenn Ihr Dienst in einer separaten Javascript-Datei definiert ist, stellen Sie sicher, dass Sie darauf verweisen! Ja, ich weiß, Anfängerfehler.

Jason
quelle

2

Ich habe vergessen, die Datei zu injizieren, in der sich meine Dienste befanden. Denken Sie daran, dies zu tun, wenn Sie Ihr App-Modul initialisieren:

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

jorisw
quelle

2

In meinem Fall habe ich eine anonyme Funktion als Wrapper für das Winkelmodul verwendet:

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

Nach dem Schließen der Klammer habe ich vergessen, die anonyme Funktion aufzurufen, indem ich die Klammern wie oben geöffnet und wieder geschlossen habe.

Emanuele Bellini
quelle

Ich weiß, dass du es vor 4 Jahren beantwortet hast, aber es hat mir heute geholfen, danke.

Legolas

1

Für mich war das Problem das faule Laden; Ich habe meinen Controller und meinen Dienst zu spät geladen, sodass sie beim Laden der Seite (und bei der Angular-Initialisierung) nicht verfügbar waren. Ich habe das mit einem UI-If-Tag gemacht, aber das ist irrelevant. Die Lösung bestand darin, den Dienst bereits mit dem Laden der Seite zu laden.

Gonfi den Tschal
quelle

1

Hier ist ein weiteres mögliches Szenario, in dem Sie diesen Fehler sehen können:

Wenn Sie Sublime Text 2 und das Winkel-Plugin verwenden, werden solche Stubs generiert

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

        }
    }
]);

Beachten Sie das leere '' als erstes Element des Arrays nach der Zeichenfolge 'utilFactory'. Wenn Sie keine Abhängigkeiten haben, entfernen Sie diese, damit es so aussieht:

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

        }
    }
]);

Dustin.schultz
quelle

1

Da diese Frage das beste Google-Ergebnis ist, werde ich der Liste eine weitere mögliche Sache hinzufügen.

Wenn das von Ihnen verwendete Modul einen Fehler im Abhängigkeitsinjektions-Wrapper aufweist, liefert es dasselbe Ergebnis. Zum Beispiel können Copy & Paste-Module aus dem Internet auf underscore.js angewiesen sein und versuchen, '_' in den di-Wrapper einzufügen. Wenn in Ihren Projektabhängigkeitsanbietern kein Unterstrich vorhanden ist und Ihr Controller versucht, auf die Factory Ihres Moduls zu verweisen, wird im Konsolenprotokoll des Browsers ein "unbekannter Anbieter" für Ihre Factory angezeigt.

user1082202
quelle

1

Das Problem für mich war, dass ich einige neue Javascript-Dateien erstellt habe, die auf den Dienst verweisen, Chrome jedoch nur die ältere Version sah. Ein STRG + F5 hat es für mich behoben.

mortey
quelle

0

Beim Kompilieren meines Projekts mit Grunt ist ein Fehler "Unbekannter Anbieter" im Zusammenhang mit Angular-Mocks (ngMockE2E) aufgetreten. Das Problem war, dass Angular-Mocks nicht minimiert werden können, sodass ich sie aus der Liste der minimierten Dateien entfernen musste.

Rusty Fausak
quelle

0

Nachdem ich auch diesen Fehler behandelt habe, kann ich diese Liste von Antworten mit meinem eigenen Fall unterstützen.

Es ist gleichzeitig einfach und dumm (vielleicht nicht dumm für Anfänger wie mich, aber ja für Experten), der Skriptverweis auf angular.min.js muss der erste in Ihrer Liste von Skripten auf der HTML-Seite sein.

Das funktioniert:

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

Dies nicht:

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

Hinweis zu den angle.min.js.

Hoffe es hilft jedem !! :) :)

Joe Lewis
quelle

0

Mein Problem war mit Yeoman, mit (großgeschrieben):

yo angular:factory Test

Erstellte Dateien (nicht kapitalisiert):

app/scripts/services/test.js

aber die index.html Datei enthalten (groß geschrieben):

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

Hoffe das hilft jemandem.

Corey Rothwell
quelle

0

Noch eine Möglichkeit.

Ich hatte unknown Provider <- <- nameOfMyService. Der Fehler wurde durch die folgende Syntax verursacht:

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

Angular suchte nach der ''Abhängigkeit.

Hugo Wood
quelle

Fehler: [$ injor: unpr] Unbekannter Anbieter: LoginFactoryProvider <- LoginFactory Ich habe diesen, also wie kann ich diesen beheben

ninjaXnado

0

Mein Szenario mag etwas dunkel sein, aber es kann den gleichen Fehler verursachen und jemand kann ihn erleben, also:

Bei Verwendung des $ controller-Dienstes zum Instanziieren eines neuen Controllers (der als erstes injiziertes Argument '$ scope' erwartete) habe ich den lokalen Bereich des neuen Controllers an den zweiten Parameter der $ controller () -Funktion übergeben. Dies führte dazu, dass Angular versuchte, einen $ scope-Dienst aufzurufen, der nicht existiert ( obwohl ich für eine Weile tatsächlich dachte, ich hätte den '$ scope'-Dienst etwas aus Angulars Cache gelöscht ). Die Lösung besteht darin, den lokalen Bereich in ein lokales Objekt zu verpacken:

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

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

Zac Seth
quelle

0

Keine der obigen Antworten hat bei mir funktioniert, vielleicht habe ich mich völlig geirrt, aber als Anfänger machen wir das auch.

Ich habe den Controller in a initialisiert div, um eine Liste zu haben:

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

Und dann verwenden $routeProvider, um eine URL demselben Controller zuzuordnen. Sobald ich ng-initden Controller entfernt hatte, arbeitete der Controller mit der Route.

jfs.csantos
quelle

0

Ich hatte das gleiche Problem. Ich habe das mit $('body').attr("ng-app", 'MyApp')anstatt behoben<body ng-app="MyApp"> Boostrap verwendet habe.

Weil ich es getan habe

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

für Architekturanforderungen.

Jokerm
quelle

0

In meiner Ruby on Rails-App hatte ich Folgendes getan:

rake assets:precompile

Dies geschah in der 'Entwicklungs'-Umgebung, die Angular.js minimiert und in die /public/assets/application.jsDatei aufgenommen hatte.

Das Entfernen der /public/assets/*Dateien löste das Problem für mich.

Nigel Sheridan-Smith
quelle

0

Ich hatte heute ein ähnliches Problem und die Probleme waren wirklich sehr klein

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

Wenn Sie den obigen Block beobachten, werden Sie in der ersten Zeile feststellen, dass ich versehentlich $ scope injiziert habe, was falsch ist. Ich habe diese unerwünschte Abhängigkeit entfernt, um das Problem zu lösen.

 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
quelle

0

Ich hatte diesen Fehler, nachdem ich eine neue Factory erstellt und innerhalb einer Komponente verwendet hatte, aber ich habe die Spezifikationen dieser Komponenten nicht überprüft

Also, wenn der Fehler in Ihren (Spezifikationen) Testdateien

Sie müssen hinzufügen beforeEach(module('YouNewServiceModule'));

Basheer AL-MOMANI
quelle

-1

Ein weiteres 'Gotcha': Ich habe diesen Fehler beim Einfügen von $ timeout erhalten, und es dauerte einige Minuten, bis mir klar wurde, dass die Array-Werte Leerzeichen enthielten. Dies wird nicht funktionieren:

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

Posting nur für den Fall, dass jemand anderes einen dummen Fehler wie diesen hat.

Lukus
quelle

-2

Mein Fall war zwielichtiges Tippen

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

Funktion hat ein 'c'!

gelandet
quelle

Winkel js unbekannter Anbieter

Antworten: