Bug minification Angular.module

Question

Avoir le temps de darnedest qu’essayer de comprendre pourquoi minification ne fonctionne pas.

J’ai ont injecté via un objet array mon préalable des fournisseurs la fonction par les nombreuses suggestions du Web et pourtant « fournisseur inconnu : aProvider

Régulier :

Minimisé :

Toute suggestion serait très reconnaissant !

Answer 1

J'ai rencontré ce problème avant avec Grunt.js Uglify plugin.

L'une des options sont mangle

uglify: {
  options: {
    mangle: false
  },

Qui, je crois, exécute des fonctions regex sur "cordes" et minifys.

Par exemple:

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

Devient:

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

Désactiver --- cette fonction n'est pas jouer gentil avec Angulaire.

Edit:

Pour être plus précis @JoshDavidMiller explique:

Uglify mangle seulement mangles comme les variables, ce qui est la cause de la AngularJS problème. Qui est, le problème est dans l'injection et pas de définition.

function MyCtrl($scope, myService) serait se déchire à l' function MyCtrl(a, b), mais la définition de service à l'intérieur d'une chaîne de caractères ne doit jamais être modifié.

• L'exécution ng-min avant l'exécution d' uglify résout ce problème.

Answer 2

Problème

D' AngularJS: Les Mauvaises Parties:

Angulaire a une construite dans la dépendance de l'injecteur qui va passer appropriée les objets à votre fonction basée sur les noms de ses paramètres:

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

Ici, les noms des paramètres $scope et $window sera comparée à une liste de noms connus, et correspondant à des objets instancié et transmis à la fonction. Angulaire obtient le paramètre les noms en appelant toString() sur la fonction, puis l'analyse de la définition de la fonction.

Le problème avec cela, bien sûr, c'est qu'il cesse de travailler le moment vous rapetisser votre code. Depuis que vous vous souciez de l'expérience utilisateur vous serez minifying votre code, utilisant ainsi ce DI, le mécanisme de pause votre application. En fait, une commune de la méthodologie de développement est d'utiliser unminified code en développement afin de faciliter le débogage, puis à rapetisser le code lorsque l'on pousse à la production ou à la mise en scène. Dans ce cas, ce problème ne sera pas l'arrière de sa tête hideuse jusqu'à ce que vous êtes au point où il fait le plus mal.

(...)

Depuis cette injection de dépendance mécanisme ne fait pas travailler dans le cas général, Angulaire fournit également un mécanisme qui ne. Pour être sûr, il fournit deux. Vous pouvez passer un tableau comme ceci:

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

Ou vous pouvez définir l' $inject de la propriété de votre constructeur:

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

Solution

Vous pouvez utiliser ng-annotate pour l'automobile de l'ajout d'annotations requises pour les minifying:

ng-annotate ajoute et supprime des AngularJS l'injection de dépendance les annotations. Il est non-intrusive de sorte que votre code source reste exactement le même le contraire. Pas perdu commentaires ou des lignes déplacées.

ng-annotate est plus rapide et plus stable que ngmin (qui est maintenant obsolète) et il y a des plugins pour de nombreux outils:

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

---

À partir de AngularJS 1.3 il y a aussi un nouveau param en ngApp appelés ngStrictDi:

si cet attribut est présent sur l'application de l'élément, l'injecteur sera créé en "strict-di". Cela signifie que l'application ne pourra pas pour appeler des fonctions qui ne sont pas de l'utilisation explicite de la fonction d'annotation (et sont donc impropres à minification), comme décrit dans la Dépendance L'Injection de guideet l'utilité des informations de débogage aidera dans le suivi en bas de la racine de ces bugs.

Answer 3

J’ai eu la même erreur. Cependant, pour moi, le problème est déclaration de contrôleur des directives. Vous devez procéder à la place.

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

Answer 4

J’ai eu un problème similaire à l’aide de grognement, ngmin et enlaidir.

J’ai couru le processus dans l’ordre suivant : concat, ngmin, enlaidir

J’étais continuant à obtenir l’erreur $injector d’angulaire jusqu'à ce que j’ai ajouté dans la mutilation d’options uglify : faux - puis tout a été fixé.

J’ai aussi essayé d’ajouter des exceptions à enlaidir comme ceci :

Mais en vain...

Voici mon gruntFile.js pour plus de précisions :

};

Answer 5

Suggestion de AndrewM96 de `` est juste.

Les questions de l’alignement et l’espace blanc Uglify comme angulaire.