angular js proveedor desconocido

152

Estoy tratando de "personalizar" el ejemplo de mongolab para que se ajuste a mi propia API REST. Ahora me encuentro con este error y no estoy seguro de lo que estoy haciendo mal:

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)

Este es mi controlador:

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

y este es el módulo:

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

      return Product;
    }]);

angularjs Stefan Ernst
fuente

Este error indica que angular no conoce la fábrica del producto, asegúrese de que el JS para este servicio sea la referencia primero. Además, al declarar los módulos, asegúrese de definir explícitamente las dependencias porque, cuando se minimizan los archivos, este error también aparece debido a la alteración del nombre. Para obtener más información, mire este artículo :: ozkary.com/2015/11/…

ozkary

130

Su código se ve bien, de hecho funciona (aparte de las llamadas mismas) cuando se copia y pega en una muestra jsFiddle: http://jsfiddle.net/VGaWD/

Es difícil decir lo que está sucediendo sin ver un ejemplo más completo, pero espero que el jsFiddle anterior sea útil. Lo que sospecho es que no está inicializando su aplicación con el módulo 'productServices' . Daría el mismo error, podemos ver esto en otro jsFiddle: http://jsfiddle.net/a69nX/1/

Si planea trabajar con AngularJS y MongoLab , le sugiero que use un adaptador existente para $ resource y MongoLab : https://github.com/pkozlowski-opensource/angularjs-mongolab. Alivia mucho el dolor al trabajar con MongoLab, usted Puede verlo en acción aquí: http://jsfiddle.net/pkozlowski_opensource/DP4Rh/ ¡Descargo de responsabilidad! Estoy manteniendo este adaptador (escrito en base a ejemplos de AngularJS), así que obviamente estoy sesgado aquí.

pkozlowski.opensource
fuente

Tengo el mismo problema y esto no resolvió mi problema. De hecho, recupero datos ... Excepto por este mensaje de error, pensarías que todo funcionaba bien. Sin embargo, no estoy usando ng-app en el elemento del cuerpo, estoy haciendo bootstrapping así: angular.element (document) .ready (function () {angular.bootstrap (document, ['reportServices']);});

Tom

17

Hola chicos, esto es un poco embarazoso. Tengo exactamente el mismo problema. Pero no puedo detectar la diferencia entre los 2 jsFiddles. Cualquier sugerencia sobre dónde mirar exactamente es muy apreciada.

schacki

44

@schacki, la diferencia en los violines se puede encontrar en la pestaña de información. Uno de ellos tiene un cuerpo con <body ng-app="productServices">y el otro tiene <body ng-app="">.

Vineet Reynolds el

¿Y dónde está la pestaña de información? :)

Aleks

3

Parece que la pestaña de información ahora es la Fiddle Optionspestaña de la derecha

Gangstead

40

Obtuve ese error porque estaba pasando un parámetro incorrecto a la definición de fábrica. Yo tenía:

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

Funcionó cuando eliminé $scopey cambié la definición de fábrica a:

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

En caso de que necesite inyectarse $scope, use:

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

bresleveloper
fuente

32

Acabo de tener un problema similar. El error decía lo mismo en la pregunta, trató de resolverlo con la respuesta de pkozlowski.opensource y Ben G, que son respuestas correctas y buenas.

Mi problema fue realmente diferente con el mismo error:

en mi código HTML tuve la inicialización como esta ...

<html ng-app>

Un poco más abajo intenté hacer algo como esto:

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

Me deshice de la primera ... luego funcionó ... obviamente no se puede inicializar ng-app dos o más veces. lo suficientemente justo.

Me olvidé por completo de la primera "aplicación ng" y me sentí totalmente frustrado. Tal vez esto ayude a alguien algún día ...

Preexo
fuente

2

Tuve un problema similar, pero en mi caso tener ng-controller especificado en el div fue el culpable de un controlador que hace referencia al servicio. Parece que Angular no sabía cómo resolver el servicio cuando analizaba la vista.

Héctor Correa el

25

Asegúrese de que su principal app.jsincluye los servicios de los que depende. Por ejemplo:

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

PrincipianteAngularJs
fuente

1

Si no me equivoco, en tal caso productServicesdebería ser un módulo, por lo que es irrelevante lo que está dentro de dicho módulo (servicios o no).

greenoldman

17

La respuesta de pkozlowski es correcta, pero en caso de que esto le suceda a otra persona, tuve el mismo error después de crear el mismo módulo dos veces por error; la segunda definición estaba anulando al proveedor de la primera:

Creé el módulo haciendo

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

luego un poco más abajo en el mismo archivo:

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

La forma correcta de hacer esto es:

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

Ben G
fuente

11

En mi caso, he definido un nuevo proveedor, por ejemplo, xyz

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

Cuando tenía que configurar el proveedor anterior, debe inyectarlo con una Providercadena agregada -> se xyzconvierte xyzProvider.

Ex:

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

Si inyecta el proveedor anterior sin la cadena 'Proveedor', obtendrá el error similar en OP.

manikanta
fuente

8

Al final del archivo JS para cerrar la función de fábrica que tenía

});

en vez de

}());

Milo P
fuente

1

Para mi proyecto usualmente usamos})();

mrOak

5

Esto me tomó demasiado tiempo para rastrear. Asegúrese de minisegurar su controlador dentro de su directiva.

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

  return {

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

    }]
  }
}

Espero que ayude

pk1m
fuente

5

Para agregar mi propia experiencia aquí, estaba tratando de inyectar un servicio en una de las funciones de configuración de mi módulo. Este párrafo de los documentos que finalmente encontré explica por qué eso no funciona:

Durante el arranque de la aplicación, antes de que Angular se active creando todos los servicios, configura e instancia todos los proveedores. A esto le llamamos la fase de configuración del ciclo de vida de la aplicación. Durante esta fase, los servicios no son accesibles porque todavía no se han creado.

Lo que significa que puede inyectar proveedores en las funciones module.config (...), pero no puede inyectar servicios, para eso debe esperar hasta module.run (...), o exponer un proveedor que puede inyectar en el módulo. config

Stewart A
fuente

4

Para mí, este error fue causado al ejecutar la versión minificada de mi aplicación angular. Los documentos angulares sugieren una forma de evitar esto. Aquí está la cita relevante que describe el problema, y puede encontrar la solución sugerida en los propios documentos aquí :

Una nota sobre la minificación Dado que Angular infiere las dependencias del controlador de los nombres de los argumentos a la función constructora del controlador, si tuviera que minimizar el código JavaScript para el controlador PhoneListCtrl, todos sus argumentos de función también se minimizarían, y el inyector de dependencia no lo haría. Ser capaz de identificar los servicios correctamente.

Sasha
fuente

3

Dado que este es el mejor resultado para "proveedor desconocido angularjs" en Google en este momento, aquí hay otro problema. Al hacer pruebas unitarias con Jasmine, asegúrese de tener esta declaración en su beforeEach()función:

module('moduleName');

De lo contrario, obtendrá el mismo error en sus pruebas.

roufamatic
fuente

3

¡Otro caso más en el que ocurrirá este error, si su servicio está definido en un archivo javascript separado, asegúrese de hacer referencia a él! Sí, lo sé, error de novato.

Jason
fuente

2

Olvidé inyectar el archivo que contenía mis servicios por completo. Recuerde hacer esto al inicializar su módulo de aplicación:

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

jorisw
fuente

2

En mi caso, utilicé una función anónima como envoltorio para el módulo angular, así:

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

Después de cerrar el paréntesis, olvidé llamar a la función anónima abriendo y cerrando los paréntesis nuevamente como se indicó anteriormente.

Emanuele Bellini
fuente

Sé que lo respondiste hace 4 años, pero hoy me ayudó, gracias.

Legolas

1

Para mí, el problema era la carga lenta; Cargué mi controlador y servicio tarde, por lo que no estaban disponibles en la carga de la página (y la inicialización angular). Hice esto con una etiqueta ui-if, pero eso es irrelevante. La solución fue cargar el servicio con la carga de la página ya.

Gonfi den Tschal
fuente

1

Aquí hay otro escenario posible donde puede ver este error:

Si usa Sublime Text 2 y el complemento angular, generará stubs como este

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

        }
    }
]);

observe el vacío '' como el primer elemento de la matriz después de la cadena 'utilFactory'. Si no tiene ninguna dependencia, elimínela para que sea así:

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

        }
    }
]);

dustin.schultz
fuente

1

Como esta pregunta es el mejor resultado de Google, agregaré otra cosa posible a la lista.

Si el módulo que está utilizando tiene una falla en el contenedor de inyección de dependencia, proporcionará este mismo resultado. Por ejemplo, los módulos de copiar y pegar de Internet pueden depender de underscore.js e intentar inyectar '_' en el contenedor de di. Si el subrayado no existe en los proveedores de dependencia de su proyecto, cuando su controlador intente hacer referencia a la fábrica de su módulo, obtendrá un 'proveedor desconocido' para su fábrica en el registro de la consola del navegador.

usuario1082202
fuente

1

El problema para mí fue que había algunos archivos javascript nuevos que creé que hacían referencia al servicio, pero Chrome solo vio la versión anterior. Un CTRL + F5 lo arregló para mí.

mortey
fuente

0

Recibí un error de "proveedor desconocido" relacionado con simulacros angulares (ngMockE2E) al compilar mi proyecto con Grunt. El problema era que los simulacros angulares no se pueden minificar, así que tuve que eliminarlo de la lista de archivos minificados.

Fausak oxidado
fuente

0

Después de manejar este error también, puedo admitir esta lista de respuestas con mi propio caso.

Al mismo tiempo, es simple y tonto (tal vez no sea tonto para principiantes como yo, pero sí para expertos), la referencia del script a angular.min.js debe ser la primera en su lista de scripts en la página html.

Esto funciona:

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

Esto no:

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

Aviso sobre el angular.min.js.

Espero que ayude a cualquiera !! :)

Joe Lewis
fuente

0

Mi problema fue con Yeoman, usando (en mayúscula):

yo angular:factory Test

Archivos realizados (sin capitalizar):

app/scripts/services/test.js

pero el archivo index.html incluido (en mayúscula):

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

Espero que esto ayude a alguien.

Corey Rothwell
fuente

0

Otra posibilidad más.

Yo tenia unknown Provider <- <- nameOfMyService. El error fue causado por la siguiente sintaxis:

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

Angular estaba buscando la ''dependencia.

Hugo Wood
fuente

Error: [$ injector: unpr] Proveedor desconocido: LoginFactoryProvider <- LoginFactory tengo este, entonces, ¿cómo puedo solucionarlo?

ninjaXnado

0

Mi escenario puede ser un poco oscuro, pero puede causar el mismo error y alguien puede experimentarlo, así que:

Al usar el servicio $ controller para crear una instancia de un nuevo controlador (que esperaba '$ scope' como primer argumento inyectado) estaba pasando el alcance local del nuevo controlador al segundo parámetro de la función $ controller (). Esto llevó a Angular a intentar invocar un servicio $ scope que no existe ( aunque, por un tiempo, realmente pensé que de alguna manera había eliminado el servicio '$ scope' del caché de Angular ). La solución es envolver el ámbito local en un objeto local:

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

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

Zac Seth
fuente

0

Ninguna de las respuestas anteriores funcionó para mí, tal vez lo estaba haciendo completamente mal, pero como principiante, eso es lo que hacemos.

Estaba inicializando el controlador en un divpara tener una lista:

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

Y luego usar $routeProviderpara asignar una URL al mismo controlador. Tan pronto como quité ng-initel controlador funcionó con la ruta.

jfs.csantos
fuente

0

Tuve el mismo problema Lo arreglé usando en $('body').attr("ng-app", 'MyApp')lugar de <body ng-app="MyApp">boostrap.

Porque lo hice

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

para requisitos de arquitectura.

Jokerm
fuente

0

En mi aplicación Ruby on Rails, hice lo siguiente:

rake assets:precompile

Esto se hizo en el entorno de "desarrollo", que había minimizado Angular.js y lo incluyó en el /public/assets/application.jsarchivo.

Eliminar los /public/assets/*archivos me resolvió el problema.

Nigel Sheridan-Smith
fuente

0

Me enfrenté a un problema similar hoy y los problemas eran realmente muy pequeños

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

Si observa el bloque anterior, en la primera línea observará que inyecté $ alcance por error, lo cual es incorrecto. Eliminé esa dependencia no deseada para resolver el 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
fuente

0

Tuve este error después de crear una nueva fábrica y usarla dentro de un componente, pero no verifiqué las especificaciones de esos componentes.

así que si la falla en sus archivos de prueba (especificaciones)

necesitas agregar beforeEach(module('YouNewServiceModule'));

Basheer AL-MOMANI
fuente

-1

Otro 'problema': recibí este error al inyectar $ timeout, y me tomó unos minutos darme cuenta de que tenía espacios en blanco en los valores de la matriz. Esto no funcionará:

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

Publicar solo en caso de que alguien más tenga un error tonto como este.

Lukus
fuente

-2

Mi caso era poco fiable escribiendo

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

la función tiene una 'c'!

aterrizado
fuente

angular js proveedor desconocido

Respuestas: