Minification wird bei Javascript Projekten oft verwendet, um die auszuliefernde Datei zu verkleinern. Hierbei werden Leerzeichen, Zeilenumbrüche und Kommentare entfernt, sowie Variablennamen verkürzt. Das Verkürzen der Variablen führt bei AngularJS jedoch zu einem Problem. AngularJS leitet die Abhängigkeiten zur Injizierung anhand des Variablennamens ab. Da die Variablennamen bei der Minification aber verkürzt werden, können die Abhängigkeiten nicht aufgelöst werden.

Ein Beispiel

AngularJS weiß hier, dass es $scope als Abhängigkeit injizieren muss.
Nach der Minification sieht der Quellcode jedoch wie folgt aus:

Hier wurde nun die $scope Variable verkürzt und ihr Name durch e ersetzt. Dadurch weiß AngularJS nicht mehr, was injiziert werden muss.

Die Lösungen

Inline Annotations

Bei den Inline Annotations wird die anonyme funktion durch ein Array ersetzt.

Der String ‚$scope‘ wird natürlich nicht verkleinert. Durch diesen kann AngularJS nun die Abhängigkeiten ableiten.
Verkleinert sieht dies so aus:

Das Einfügen von Inline Annotations lässt sich mit ng-annotate automatisieren. Für Grunt und Gulp gibt es Plugins, um ng-annotate in den Buildprozess zu integrieren.

Abhängigkeiten explizit injizieren

Die zweite Möglichkeit ist es, die Abhängigkeiten explizit zu injizieren.

Mehr Informationen finden sich in den offiziellen AngularJS Docs unter „A Note on Minification“.