Я все еще хотел бы знать, как я мог найти место в нашем исходном коде, которое вызвало эту проблему, но с тех пор я смог найти проблему вручную.
В глобальной области действия была объявлена функция контроллера вместо использования вызова .controller() в модуле приложения.
Итак, было что-то вроде этого:
function SomeController( $scope, i18n ) { /* ... */ }
Это прекрасно работает для AngularJS, но чтобы он правильно работал с изменением, мне пришлось изменить его на:
var applicationModule = angular.module( "example" );
function SomeController( $scope, i18n ) { /* ... */ }
applicationModule.controller( "SomeController", [ "$scope", "i18n", SomeController ] );
После дальнейших тестов я действительно обнаружил экземпляры большего количества контроллеров, которые также вызывали проблемы. Вот как я нашел их источник вручную:
Прежде всего, я считаю довольно важным включить улучшение вывода в настройках uglify. Для нашей грубой задачи это означало:
options : {
beautify : true,
mangle : true
}
Затем я открыл веб-сайт проекта в Chrome с открытым DevTools. В результате регистрируется ошибка, подобная приведенной ниже:
Интересующий нас метод в трассировке вызовов я пометил стрелкой. Это providerInjector в injector.js. Вы захотите разместить точку останова, где она выдает исключение:
Теперь, когда вы снова запустите приложение, будет достигнута точка останова, и вы сможете перейти вверх по стеку вызовов. Будет выполнен вызов из invoke в injector.js, узнаваемый по строке «Неверный токен инъекции»:
Параметр locals (искаженный до d в моем коде) дает довольно хорошее представление о том, какой объект в вашем исходном коде является проблемой:
Быстрый grep по нашему источнику находит много экземпляров modalInstance, но, идя оттуда, было легко найти это место в источнике:
var ModalCreateEditMeetingController = function( $scope, $modalInstance ) {
};
Что нужно изменить на:
var ModalCreateEditMeetingController = [ "$scope", "$modalInstance", function( $scope, $modalInstance ) {
} ];
В случае, если переменная не содержит полезной информации, вы также можете прыгнуть выше по стеку и нажать на вызов invoke, который должен иметь дополнительные подсказки:
Не допустить повторения этого
Теперь, когда вы, надеюсь, нашли проблему, я чувствую, что должен упомянуть, как лучше всего избежать повторения этого в будущем.
Очевидно, вы могли бы просто везде использовать аннотацию встроенного массива или ( в зависимости от ваших предпочтений) $inject аннотация свойства и просто постарайтесь не забыть об этом в будущем. Если вы это сделаете, обязательно включите строгий режим внедрения зависимостей. , чтобы отловить подобные ошибки на ранней стадии.
Осторожно! Если вы используете Angular Batarang, StrictDI может вам не подойти, так как Angular Batarang внедряет в ваш код без аннотаций (плохой Batarang!).
Или вы можете позволить ng-annotate позаботиться об этом. Я настоятельно рекомендую это сделать, так как это устраняет множество потенциальных ошибок в этой области, например:
- Отсутствует аннотация DI
- Аннотация DI неполная
- Аннотация DI в неправильном порядке
Поддержание аннотаций в актуальном состоянии — это просто заноза в заднице, и вам не нужно делать это, если это можно сделать автоматически. ng-annotate делает именно это.
Он должен хорошо интегрироваться в процесс сборки с помощью grunt-ng-annotate и gulp-ng-annotate.
person
Der Hochstapler
schedule
14.02.2014
"all". Вот почему я смущен тем, что не получаю ожидаемого результата. Я также добавилbeautify:trueк параметрам, чтобы получить более четкий вывод. Хотя вообще без комментариев. Несмотря на это, я не уверен, как определить проблемный источник с точки, в которой возникла ошибка. - person Der Hochstapler schedule 11.02.2014var foo = "I'm in file Foo.js";- person JB Nizet schedule 11.02.2014grepтакже не выявил никаких применений в наших зависимостях. - person Der Hochstapler schedule 11.02.2014