UglifyJS2 ломает инъекцию зависимости в приложении Angular.js

Question

У меня есть приложение Angular.js, которое я хочу минимизировать.

Прежде всего, я настроил определенный конвейер gulp, чтобы автоматически обрабатывать аннотации и миниатюры.

Чтобы проверить, насколько хорошо работают неявные аннотации, я добавил аннотации, используя ngAnnotate, а затем запустил приложение с параметрами strict-di, чтобы уловить все пропущенные аннотации. Затем я добавил комментарии для всех отсутствующих аннотаций, которые я нашел. После этого все отлично работает, ngAnnotate автоматически комментирует мой код, а strict-di больше нет предупреждений.

Однако, когда я фактически уменьшаю свой код с помощью UglifyJS2, он не может запустить приложение, заявив, что некоторая служба не найдена.

Вот реальное сообщение об ошибке:

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

Если добавить mangle: false опции к UglifyJS2, он отлично работает.

- Вопрос в том, как найти виновника и почему strict-di не поймал его?

Answer 1

Хорошо! Мне, наконец, удалось разобраться с этой проблемой.

Я собираюсь опубликовать здесь стратегию, которая помогла мне эффективно решить эту проблему.

Стратегия

У меня был довольно большой базой кода, и все было в одном файле JavaScript. В нем были указаны все зависимости, как сторонние, так и местные, и в комплекте с плагином gulp.

Первое, что я сделал, - это разделить код на два файла: vendor.js и application.js. Я переместил все сторонние зависимости в первый файл и оставил все локальные зависимости во втором. После этого я попытался запустить мое приложение с application.js minified и vendor.js unminified. Этот простой трюк помог мне определить, что проблема была на самом деле с сторонним кодом, а не с моим приложением.

У меня было 34 внешних зависимостей, указанных в этой точке, поэтому я создал два файла vendor.js и vendor-cleared.js и начал перемещать зависимости с первого на второй (пополам). На этот раз я скомпилировал второй и оставил первый unminified. После нескольких итераций я нашел проблемную стороннюю библиотеку, которая не была должным образом аннотирована.

Я исправил его и снова положил обратно в мой application.js. После этого мое приложение начало работать безупречно.

---

Я надеюсь, что эта простая идея поможет вам превратить большой объем кода в правильно аннотированные один и, наконец, преуменьшать его!

После этого просто проверьте, правильно ли работает минификация при добавлении новых зависимостей. И не забудьте всегда использовать strict-di. Он не работает все время, но он выполняет довольно хорошую работу.