angularjs - grunt - Encontrar la causa de los errores del "proveedor desconocido"

grunt angularjs

Question

Me aparece el siguiente error:

Error: [$injector:unpr] Unknown provider: nProvider <- n

Sé que esto está siendo causado por el proceso de minificación y entiendo por qué . Sin embargo, ¿hay alguna manera fácil de determinar qué archivo está causando realmente el problema?

Answer 1

Angular 1.3.x tiene una directiva ng-strict-di que se coloca en el mismo elemento que la directiva ng-app. Este elemento hace que su aplicación arroje un error cada vez que las dependencias no se hayan anotado. Aunque todavía no le proporciona el número de línea del código ofensivo, sí le proporciona la función con sus parámetros (es decir, función ($ scope, myServiceName)) que, con suerte, es lo suficientemente única como para encontrarla rápidamente en un buen sitio. editar código

Una buena visión general de la directiva: ng-strict-di .

Answer 2

El inyector Angular tiene 3 formas de resolver las dependencias por usted:

1. Inferir dependencias de los nombres de los argumentos de la función . Este es el más utilizado en todos los ejemplos de angular, por ejemplo

app.controller(''MyController'', function($scope, MyService) { ... });

En este caso, los moldes de inyectores funcionan como cadenas, analiza nombres de argumentos y busca servicios / fábricas / cualquier otra cosa que coincidan con ese nombre.

2. Anotaciones en línea . También puede encontrar esta sintaxis:

app.controller(''MyController'', [''$scope'', ''MyService'', function($scope, MyService) { ... }]);

En este caso, hace que sea mucho más fácil para el inyector, ya que indica explícitamente los nombres de las dependencias que necesita. Los nombres están entre comillas y los minificadores js no modifican cadenas en el código.

3. Anotaciones en línea como propiedad . Si define sus controladores como funciones, puede establecer anotaciones en propiedades especiales $inject :

function MyController($scope, MyService) {...}
MyController.$inject = [''$scope'', ''MyService''];

En este caso, también declaramos dependencias explícitamente.

Supongo que estás usando la solución no. 1. Una vez que el minificador cambia los nombres de sus dependencias implícitamente definidas, el inyector ya no sabe, cuáles son las dependencias de su función. Para superar esto, debe usar la segunda o tercera forma de anotar dependencias.

Answer 3

Entiendo la pregunta y tengo una respuesta, es un poco complicada.

La forma en que encontré el problema fue cambiar el nombre de todos los identificadores para hacerlos únicos, luego obtendrá algo útil que debe buscar en su javascript compilado que con suerte lo dirigirá hacia el culpable.

descargue mi versión modificada de uglify (solicitud de extracción pendiente ...)

brew install node si no tienes el nodo instalado.

./bin/uglifyjs --unique_ids original.min.js >new.min.js

Ahora reemplace sus js compilados con new.min.js y cargue su aplicación para reproducir el problema ahora debería recibir un error de inyección de dependencia como n4536

Si tu editor es increíble con líneas súper largas, solo puedes cargar new.min.js, busca n4536 y con suerte eso te ayudará a identificar al culpable.

Si no, esto funcionará para imprimir un contexto alrededor del problema. egrep -o ''.{199}n4536.{99}'' new.min.js

Answer 4

Si bien no parece haber ninguna forma excelente de solucionar estos problemas de DI si no tienes idea de dónde mirar, tuve la sensación de que el mío estaba en un lugar menos que obvio ... y fue:

App.Services = angular.module(''spokenvote.services'', [''ngResource'', ''ngCookies''])
    .config(servicesConfig)
    .run(($rootScope, $location) -> $rootScope.location = $location)

necesitaba ser:

App.Services = angular.module(''spokenvote.services'', [''ngResource'', ''ngCookies''])
    .config(servicesConfig)
    .run([''$rootScope'', ''$location'', ($rootScope, $location) -> $rootScope.location = $location])