UglifyJS2 bricht Abhängigkeit Injektion in Angular.js Anwendung

Question

Ich habe eine Angular.js-Anwendung, die ich minimieren möchte.

Als Erstes habe ich eine bestimmte Schluckpipeline eingerichtet, um Annotationen und Verkleinerungen automatisch zu behandeln.

Um zu überprüfen, wie gut implizite Annotationen funktionieren, habe ich Annotationen mit ngAnnotate hinzugefügt und dann eine Anwendung mit strict-di Optionen ausgeführt, um alle verpassten Annotationen zu erfassen. Dann habe ich Kommentare für alle fehlenden Anmerkungen hinzugefügt, die ich gefunden habe. Danach funktioniert alles prima, automatisch kommentiert meinen Code und strict-di hat keine Warnungen mehr.

Wenn ich jedoch tatsächlich meinen Code unter Verwendung UglifyJS2 verkleinern, kann es die Anwendung nicht starten, die besagt, dass ein Dienst nicht gefunden wurde.

Hier ist die eigentliche Fehlermeldung:

State change error Error: [$injector:unpr] Unknown provider: tProvider <- t

Wenn ich mangle: false Option zum UglifyJS2 hinzufügen, es funktioniert gut.

- Also ist die Frage, wie finde ich den Schuldigen und warum strict-di fängt es nicht?

Answer 1

Okay! Ich habe es endlich geschafft, dieses Problem zu lösen.

Ich werde hier eine Strategie, die mir geholfen hat, es effizient zu lösen.

Strategie

ich eine ziemlich große Code-Basis hatte, war alles in einer einzigen JavaScript-Datei. Alle Abhängigkeiten, sowohl von Drittanbietern, als auch von lokalen, wurden darin angegeben und mit dem gulp-Plugin gebündelt. Das erste, was ich tat, war, den Code in zwei Dateien zu teilen: vendor.js und application.js. Ich habe alle Abhängigkeiten von Drittanbietern in die erste Datei verschoben und alle lokalen Abhängigkeiten in der zweiten Datei belassen. Danach habe ich versucht, meine Anwendung mit application.js minimiert und vendor.js unminified ausgeführt. Dieser einfache Trick half mir festzustellen, dass das Problem tatsächlich mit dem Code von Drittanbietern und nicht mit meiner Anwendung zusammenhing.

Ich hatte eine 34 externe Abhängigkeiten an diesem Punkt, also habe ich wieder zwei Dateien vendor.js und erstellt und begann Abhängigkeiten von der ersten in die zweite (halbiert) zu verschieben. Diesmal habe ich die zweite zusammengestellt und die erste uneminifiziert gelassen. Nach ein paar Iterationen habe ich eine problematische Bibliothek eines Drittanbieters gefunden, die nicht ordnungsgemäß mit Anmerkungen versehen wurde.

Ich habe es behoben, und alles wieder zusammen in meinem application.js. Danach hat meine App einwandfrei funktioniert.

---

Ich hoffe, dass diese einfache Idee, die Sie große Code-Basis zu einem richtig kommentierte ein und schließlich minify es konvertieren helfen!

Überprüfen Sie danach, ob die Minimierung korrekt funktioniert, wenn Sie neue Abhängigkeiten hinzufügen. Und vergessen Sie nicht, immer strict-di zu verwenden. Es funktioniert nicht die ganze Zeit, aber es macht einen ziemlich guten Job.