Pasar el tiempo más divertido tratando de descubrir por qué la minificación no funciona.

He inyectado a través de un objeto de matriz a mis proveedores antes de la función según numerosas sugerencias en la web y, sin embargo, todavía "Proveedor desconocido: aProvider <- a"

Regular:

var app = angular.module('bpwApp', ['ui.bootstrap', 'ui', 'myTabs'])
    .config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
    $routeProvider.
        when('/', {templateUrl: 'partials/home.jade', controller: HomeCtrl});

    $locationProvider.html5Mode(true);
    }])

Minificado:

var app = angular.module('bpwApp', ['ui.bootstrap', 'ui', 'myTabs'])
    .config(['$routeProvider', '$locationProvider', function(a, b){
    a.
        when('/', {templateUrl: 'partials/home.jade', controller: HomeCtrl});

    b.html5Mode(true);
    }])

¡Cualquier sugerencia sería muy agradecida!

Me encontré con este problema antes con el complemento Grunt.js Uglify .

Una de las opciones es mangle

uglify: {
  options: {
    mangle: false
  },

Lo que creo que ejecuta funciones de expresiones regulares en "cadenas similares" y las minimiza.

Por ejemplo:

angular.module("imgur", ["imgur.global","imgur.album"]);

Se convertiría:

angular.module("a", ["a.global","a.album"]);

Desactívelo: esta función no funciona bien con Angular.

Editar:

Para ser más precisos, como explica @JoshDavidMiller:

Uglify manglesolo modifica variables similares, que es lo que realmente causa el problema de AngularJS. Es decir, el problema está en la inyección y no en la definición.

function MyCtrl($scope, myService)se estropearía function MyCtrl(a, b), pero la definición de servicio dentro de una cadena nunca debería modificarse.

• Ejecutar ng-minantes de ejecutar uglifyresuelve este problema.

Problema

Desde AngularJS: The Bad Parts :

Angular tiene un inyector de dependencia incorporado que pasará los objetos apropiados a su función en función de los nombres de sus parámetros:

function MyController($scope, $window) {
    // ...
}

Aquí, los nombres de los parámetros $scopey$window se compararán con una lista de nombres conocidos, y los objetos correspondientes se instancian y pasan a la función. Angular obtiene los nombres de los parámetros llamando toString()a la función y luego analizando la definición de la función.

El problema con esto, por supuesto, es que deja de funcionar en el momento en que minimizas tu código . Dado que le importa la experiencia del usuario, estará minimizando su código, por lo que el uso de este mecanismo DI romperá su aplicación. De hecho, una metodología de desarrollo común es utilizar código no minificado en el desarrollo para facilitar la depuración y luego minificar el código al pasar a producción o puesta en escena. En ese caso, este problema no levantará su fea cabeza hasta que esté en el punto donde más duele.

(...)

Dado que este mecanismo de inyección de dependencia no funciona en el caso general, Angular también proporciona un mecanismo que sí lo hace. Sin duda, proporciona dos. Puede pasar una matriz como esta:

module.controller('MyController', ['$scope', '$window', MyController]);

O puede establecer la $injectpropiedad en su constructor:

MyController.$inject = ['$scope', '$window'];

Solución

Puede usar ng-annotatepara agregar automáticamente las anotaciones necesarias para minificar:

ng-annotateagrega y elimina anotaciones de inyección de dependencia de AngularJS. No es intrusivo, por lo que su código fuente permanece exactamente igual. Sin comentarios perdidos ni líneas movidas.

ng-annotatees más rápido y estable que ngmin(que ahora está en desuso) y tiene complementos para muchas herramientas:

• grunt-ng-annotate
• gulp-ng-annotate
• browserify-annotate

A partir de AngularJS 1.3 también hay un nuevo parámetro ngAppllamado ngStrictDi:

si este atributo está presente en el elemento de la aplicación, el inyector se creará en modo "estricto-di". Esto significa que 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), como se describe en la guía de inyección de dependencia , y la información de depuración útil ayudará a rastrear la raíz de estos errores.

Tengo el mismo error. Sin embargo, para mí, el problema es la declaración del controlador de las directivas. Deberías hacer esto en su lugar.

myModule.directive('directiveName', function factory(injectables) {
    var directiveDefinitionObject = {
      templateUrl: 'directive.html',
      replace: false,
      restrict: 'A',
      controller: ["$scope", "$element", "$attrs", "$transclude", "otherInjectables",
        function($scope, $element, $attrs, $transclude, otherInjectables) { ... }]
    };
    return directiveDefinitionObject;
  });

https://github.com/angular/angular.js/pull/3125

Tuve un problema similar al usar grunt, ngmin y uglify.

Ejecuté el proceso en este orden: concat, ngmin, uglify

Seguí obteniendo el error $ injector de angular hasta que agregué las opciones de uglify mangle: false, luego todo se solucionó.

También intenté agregar las excepciones para uglify así:

 options: {
  mangle: {
     except: ['jQuery', 'angular']
  }
}

Pero fue en vano...

Aquí está mi gruntFile.js para mayor aclaración:

module.exports = function(grunt) {
'use strict';
// Configuration goes here
grunt.initConfig({
    pkg: require('./package.json'),

    watch: {
        files: ['scripts/**/*.js', 'test/**/*spec.js', 'GruntFile.js'],
        tasks: ['test', 'ngmin']
    },

    jasmine : {
        // Your project's source files
        src : ['bower_components/angular/angular.js', 'bower_components/angular-mocks/angular-mocks.js', 'scripts/app.js', 'scripts/**/*.js' ],
        // Your Jasmine spec files

        options : {
            specs : 'test/**/*spec.js',
            helpers: 'test/lib/*.js'
        }
    },

    concat: {
      dist : {
          src: ['scripts/app.js', 'scripts/**/*.js'],
          dest: 'production/js/concat.js'
      }
    },

    ngmin: {
        angular: {
            src : ['production/js/concat.js'],
            dest : 'production/js/ngmin.js'
        }

    },

    uglify : {
        options: {
            report: 'min',
            mangle: false
        },
        my_target : {
            files : {
                'production/app/app.min.js' : ['production/js/ngmin.js']
            }
        }
    },

  docular : {
      groups: [],
      showDocularDocs: false,
      showAngularDocs: false
  }

});

// Load plugins here
grunt.loadNpmTasks('grunt-ngmin');
grunt.loadNpmTasks('grunt-docular');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jasmine');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-connect');

// Define your tasks here
grunt.registerTask('test', ['jasmine']);
grunt.registerTask('build', ['concat', 'ngmin', 'uglify']);
grunt.registerTask('default', ['test', 'build', 'watch']);

};

La sugerencia de AndrewM96 ng-mines correcta.

La alineación y el espacio en blanco son importantes para Uglify y Angular.

Tuve un problema similar. Y lo resolvió de la siguiente manera. Necesitamos ejecutar un módulo Gulp llamado gulp-ng-annotate antes de ejecutar uglify. Entonces instalamos ese módulo

npm install gulp-ng-annotate --save-dev

Luego haga el requerimiento en Gulpfile.js

ngannotate = require(‘gulp-ng-annotate’)

Y en tu tarea usemin haz algo como esto

js: [ngannotate(), uglify(),rev()] 

Eso me resolvió.

[EDITAR: errores tipográficos corregidos]

Uglify tiene una opción para deshabilitar la manipulación de archivos específicos:

options: {
  mangle: {
     except: ['jQuery', 'angular']
  }
}

https://github.com/gruntjs/grunt-contrib-uglify#reserved-identifiers

Esto es muy difícil de depurar porque muchos servicios tienen el mismo nombre (principalmente e o a). Esto no resolverá el error, pero le proporcionará el nombre del servicio no resuelto que le permite rastrear, en la salida desagradable, la ubicación en el código y finalmente le permite resolver el problema:

Vaya a lib/scope.jsUglify2 ( node_modules/grunt-contrib-uglify/node_modules/uglify-js/lib/scope.js) y reemplace la línea

this.mangled_name = this.scope.next_mangled(options);

con

this.mangled_name = this.name + "__debugging_" + counter++