“Proveedor desconocido: aProvider <- a” ¿Cómo encuentro el proveedor original?

Cuando estoy cargando la versión minificada (a través de UglifyJS) de mi aplicación AngularJS, aparece el siguiente error en la consola:

Unknown provider: aProvider <- a

Ahora, me doy cuenta de que esto se debe a la alteración del nombre de las variables. La versión sin destrozar funciona bien. Sin embargo, yo no quiero hacer uso de renombrado de nombres variables, ya que reduce drásticamente el tamaño de nuestro archivo de salida JS.

Por esa razón, estamos usando ngmin en nuestro proceso de compilación, pero no parece resolver este problema, aunque nos sirvió bien en el pasado.

Entonces, para depurar este problema, habilité los mapas de origen en nuestra tarea uglify grunt. Se generan muy bien y Chrome hace cargar los mapas desde el servidor. Sin embargo, sigo recibiendo el mismo mensaje de error inútil, aunque tenía la impresión de que ahora debería ver el nombre original del proveedor.

¿Cómo consigo que Chrome use los mapas de origen para decirme qué proveedor es el problema aquí o, alternativamente, cómo puedo encontrar el proveedor de otra manera?

Todavía me encantaría saber cómo pude haber encontrado el lugar en nuestro código fuente que causó este problema, pero desde entonces he podido encontrar el problema manualmente.

Había una función de controlador declarada en el ámbito global, en lugar de usar una .controller()llamada en el módulo de la aplicación.

Entonces había algo como esto:

function SomeController( $scope, i18n ) { /* ... */ }

Esto funciona bien para AngularJS, pero para que funcione correctamente con la manipulación, tuve que cambiarlo a:

var applicationModule = angular.module( "example" );
function SomeController( $scope, i18n ) { /* ... */ }
applicationModule.controller( "SomeController", [ "$scope", "i18n", SomeController ] );

Después de más pruebas, encontré casos de más controladores que también causaron problemas. Así es como encontré la fuente de todos ellos manualmente :

En primer lugar, considero bastante importante habilitar el embellecimiento de salida en las opciones de uglify. Para nuestra dura tarea eso significaba:

options : {
    beautify : true,
    mangle   : true
}

Luego abrí el sitio web del proyecto en Chrome, con DevTools abierto. Lo que da como resultado que se registre un error como el siguiente:

El método en el seguimiento de llamadas que nos interesa es el que marqué con una flecha. Esto está providerInjectoreninjector.js . Querrá colocar un punto de interrupción donde arroje una excepción:

Cuando vuelva a ejecutar la aplicación, se alcanzará el punto de interrupción y podrá saltar la pila de llamadas. Habrá una llamada desde invokeadentroinjector.js , reconocible desde la cadena "Token de inyección incorrecto":

El localsparámetro (alterado den mi código) da una idea bastante buena sobre qué objeto en su fuente es el problema:

Un rápido grepvistazo a nuestra fuente encuentra muchas instancias de modalInstance, pero a partir de ahí, fue fácil encontrar este lugar en la fuente:

var ModalCreateEditMeetingController = function( $scope, $modalInstance ) {
};

Que debe cambiarse a:

var ModalCreateEditMeetingController = [ "$scope", "$modalInstance", function( $scope, $modalInstance ) {
} ];

En caso de que la variable no contenga información útil, también puede saltar más en la pila y debe hacer una llamada a la invokeque debe tener sugerencias adicionales:

Evita que esto vuelva a suceder

Ahora que, con suerte, ha encontrado el problema, creo que debería mencionar la mejor forma de evitar que esto vuelva a suceder en el futuro.

Obviamente, puede usar la anotación de matriz en línea en todas partes, o la $injectanotación de propiedad (según su preferencia) y simplemente tratar de no olvidarse de ella en el futuro. Si lo hace, asegúrese de habilitar el modo de inyección de dependencia estricta para detectar errores como este antes de tiempo.

¡Cuidado! En caso de que esté utilizando Angular Batarang, StrictDI podría no funcionar para usted, ya que Angular Batarang inyecta código no anotado en el suyo (¡Bad Batarang!).

O puede dejar que ng-annotate se encargue de ello. Recomiendo encarecidamente hacerlo, ya que elimina una gran cantidad de posibles errores en esta área, como:

• Falta la anotación DI
• Anotación DI incompleta
• Anotación DI en orden incorrecto

Mantener las anotaciones actualizadas es simplemente un dolor de cabeza y no debería tener que hacerlo si se puede hacer automáticamente. ng-annotate hace exactamente eso.

Debería integrarse muy bien en su proceso de compilación con grunt-ng-annotate y gulp-ng-annotate .

El artículo de Oliver Salzburg fue fantástico. Voto a favor.

Sugerencia para cualquiera que pueda tener este error. El mío simplemente fue causado por olvidar pasar una matriz para un controlador de directiva:

MALO

return {
    restrict: "E",
    scope: {                
    },
    controller: ExampleDirectiveController,
    templateUrl: "template/url/here.html"
};

BUENO

return {
    restrict: "E",
    scope: {                
    },
    controller: ["$scope", ExampleDirectiveController],
    templateUrl: "template/url/here.html"
};

use ng-strict-di con ng-app

Si está utilizando angular 1.3 usted puede ahorrarse un mundo de dolor mediante el uso de ngStrictDi Directiva con ngApp:

<html lang="en" ng-app="myUglifiablyGreatApp" ng-strict-di>

Ahora, pre-minificación, cualquier cosa que no use anotaciones hará explotar tu consola y podrás ver el maldito nombre sin buscar entre los rastros de pila destrozados.

Según los documentos:

la aplicación no podrá invocar funciones que no utilicen anotaciones de función explícitas (y por lo tanto no son adecuadas para la minificación)

Una advertencia , sólo se detecta que no son anotaciones, no es que las anotaciones se han completado.

Sentido:

['ThingOne', function(ThingA, ThingB) { … }]

No captaré que ThingB no es parte de la anotación.

El crédito por este consejo es para la gente de ng-annotate , que se recomienda sobre el ahora obsoleto ngMin.

Para minimizar el angular, todo lo que necesita es cambiar su declaración al modo de declaración de "matriz", por ejemplo:

De:

var demoApp= angular.module('demoApp', []);
demoApp.controller(function demoCtrl($scope) {
} );

A

var demoApp= angular.module('demoApp', []);
demoApp.controller(["$scope",function demoCtrl($scope) {
}]);

¿Cómo declarar los servicios de fábrica?

demoApp.factory('demoFactory', ['$q', '$http', function ($q, $http) {
    return {
          //some object
    };
}]);

Acabo de tener el mismo problema y lo resolví simplemente reemplazando ngmin (ahora en desuso) con ng-annotate para mi tarea de compilación grunt.

Parece que yeoman angular también se ha actualizado para usar ng-annotate a partir de este compromiso: https://github.com/yeoman/generator-angular/commit/3eea4cbeb010eeaaf797c17604b4a3ab5371eccb

Sin embargo, si está utilizando una versión anterior de yeoman angular como yo, simplemente reemplace ng-min con ng-annotate en su package.json:

-    "grunt-ngmin": "^0.0.3",
+    "grunt-ng-annotate": "^0.3.0",

ejecutar npm install(luego opcionalmente npm prune) y seguir los cambios en la confirmación para editar Gruntfile.js.

para saber cuál era el nombre de la variable original, puede cambiar cómo uglify manipula las variables:

../node_modules/grunt-contrib-uglify/node_modulesuglify-js/lib/scope.js

SymbolDef.prototype = {
  unmangleable: [...],
  mangle: function(options) {
    [...]
    this.mangled_name = s.next_mangled(options, this)+"_orig_"+this.orig[0].name;
    [...]
  }
};

y ahora el error es mucho más obvio

Error: [$injector:unpr] Unknown provider: a_orig_$stateProvider
http://errors.angularjs.org/1.3.7/$injector/unpr?p0=a_orig_%24stateProvider
at eval (eval at <anonymous> (http://example.com/:64:17), <anonymous>:3155:20)

EDITAR

Tan obvio ahora ...

Gruntfile.js

uglify: {
  example: {
    options: {
      beautify: true,
      mangle: true
    },
    [...]
  },
  [...]
}

../node_modules/grunt-contrib-uglify/node_modulesuglify-js/lib/scope.js

var numberOfVariables = 1;
SymbolDef.prototype = {
  unmangleable: [...],
  mangle: function(options) {
    [...]
    this.mangled_name = s.next_mangled(options, this)+"_orig_"+this.orig[0].name+"_"+numberOfVariables++;
    [...]
  }
};

ahora cada variable está alterada a un valor único que también contiene el original ... simplemente abra el javascript minificado y busque "a_orig_ $ stateProvider_91212" o lo que sea ... lo verá en su contexto original ...

no podría ser más fácil ...

Además no olvide la resolvepropiedad de la ruta. También debe definirse como la matriz:

$routeProvider.when('/foo', {
    resolve: {
        bar: ['myService1', function(myService1) {
            return myService1.getThis();
        }],
        baz: ['myService2', function(myService2) {
            return myService2.getThat();
        }]
    }
});

Con generador-gulp-angular:

   /** @ngInject */
    function SomeController($scope, myCoolService) {

}

Escriba / ** @ngInject * / antes de cada controlador, servicio, directiva.

Una solución rápida y sucia para esto si no necesita que Uglify mangle / acorte los nombres de sus variables es establecer mangle = false en su Gruntfile

    uglify: {
        compile: {
            options: {
                mangle   : false,
                ...
            },
        }
    }