Angular.error de minificación del módulo


Tener el tiempo más maldito tratando de averiguar por qué la minificación no está funcionando.

He inyectado a través de un objeto array mis proveedores antes de la función por numerosas sugerencias a través de la web y aún así "Proveedor desconocido: aProvider

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 agradecido!

Author: Dan Kanze, 2013-06-21

8 answers

Me encontré con este problema antes con Grunt.js Uglify plugin.

Una de las opciones son mangle

uglify: {
  options: {
    mangle: false
  },

Que creo que ejecuta funciones regex en "like strings" y minifys ellos.

Por ejemplo:

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

Se convertiría en:

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

Deshabilitarlo --- esta característica no funciona bien con Angular.

Editar:

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

Uglify mangle solamente mangles como variables, que es lo que realmente causa el problema AngularJS. Es decir, el problema está en la inyección y no en la definición.

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

  • Ejecutar ng-min antes de ejecutar uglify resuelve este problema.
 138
Author: Dan Kanze,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-01-04 21:01:16

Problema

De AngularJS: Las Partes Malas:

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

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

Aquí, los nombres de los parámetros $scope y $window se emparejado con una lista de nombres conocidos, y los objetos correspondientes obtener instanciado y pasado a la función. Angular obtiene el parámetro nombres llamando a toString() en la función, y a continuación, el análisis de la definición de la función.

El problema con esto, por supuesto, es que deja de funcionar el momento de minificar su código . Ya que te importa la experiencia del usuario usted estará reduciendo su código, por lo tanto, el uso de este mecanismo DI será rompe tu app. De hecho, una metodología de desarrollo común es utilizar código sin minificar en desarrollo para facilitar la depuración y, a continuación, minificar el código al empujar a producción o puesta en escena. En ese caso, esto el problema no levanta su fea cabeza hasta que estés en el punto donde duele más.

(...)

Dado que este mecanismo de inyección de dependencias en realidad no funciona en el caso general, Angular también proporciona un mecanismo que lo hace. Para estar seguro, proporciona dos. Puedes pasar una matriz como esta:

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

O puede establecer la propiedad $inject en su constructor:

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

Solución

Puede utilizar ng-annotate para agregar automáticamente anotaciones necesarias para reducir:

ng-annotate añade y elimina la inyección de dependencia AngularJS anotaciones. Es no intrusivo por lo que su código fuente permanece exactamente el lo mismo en otros casos. No hay comentarios perdidos o líneas movidas.

ng-annotate es más rápido y estable que ngmin (que ahora está en desuso) y tiene plugins para muchos herramientas:


A partir de AngularJS 1.3 también hay un nuevo param en ngApp llamado ngStrictDi:

Si este atributo está presente en el elemento app, el inyector será creado en modo "strict-di". Esto significa que la aplicación fallará para invocar funciones que no usan anotación explícita de funciones (y por lo tanto, no son adecuados para minificación), como se describe en la dependencia Guía de inyección , e información útil de depuración ayudará en el seguimiento por la raíz de estos bichos.

 49
Author: Paolo Moretti,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-11-05 18:44:10

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

 21
Author: angelokh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-02-02 07:03:11

Tuve un problema similar usando grunt, ngmin y uglify.

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

Continuaba obteniendo el error inj injector de angular hasta que agregué en las opciones uglify mangle: false - entonces todo fue arreglado.

También traté de agregar las excepciones a uglify de esta manera:

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

Pero en vano...

Aquí está mi archivo de Grunt.js for further clarification:

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']);

};

 9
Author: Sten Muchow,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-01-06 08:31:11

La sugerencia de AndrewM96 de ng-min es correcta.

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

 5
Author: BPWDevelopment,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-06-21 17:05:30

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. Así que instalamos ese módulo

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

Luego haga el require en Gulpfile.js

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

Y en su tarea usemin hacer algo como esto

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

Eso lo resolvió para mí.

[EDITAR: Errores tipográficos corregidos]

 3
Author: Paulo Borralho Martins,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-03-23 21:39:43

Uglify tiene una opción para deshabilitar la alteración en archivos específicos:

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

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

 2
Author: Courtenay,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-12-09 16:11:17

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

Vaya a lib/scope.js de Uglify2 (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++
 2
Author: Bas,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-03-06 10:34:33