Отладка неизвестного поставщика в миниатюре angular javascript
Мне сложно определить, какие из методов, которые у меня есть в моем приложении angular, которые вызывают ошибку:
Uncaught Error: [$injector:unpr] Unknown provider: nProvider <- n
Это происходит только после того, как javascript был добавлен и уменьшен ASP.Net.
Я убедился, что все контроллеры и любой другой DI используют метод минимизации, I.E Мои контроллеры/службы и т.д. используют метод:
appControllers.controller('myCtrl', ['$scope', function($scope){
//......
}]);
Я прошел через каждый JS файл в нашем приложении - там много... и не может найти ничего, что нарушает этот способ инъекции зависимостей - хотя должно быть где-то...
Есть ли лучший способ определить, какой метод может вызвать эту ошибку?
Спасибо
Ответы
Ответ 1
Как упоминалось в комментариях, это шаги, которые я предпринял, чтобы попытаться найти мою ошибку JS.
Если есть другое, более легкое решение, не стесняйтесь публиковать его, и я могу отметить его как принятый.
Попытка отладить минифицированный код - это кошмар.
В конце концов я сделал копию моего миниатюрного javascript, непосредственно от инспектора в Chrome.
Затем я вставил JS в http://www.jspretty.com/ - я пробовал http://jsbeautifier.org/, но обнаружили, что их сайт застыл с таким большим JS-кодом.
Как только он был "довольно-фид", я создал файл test.js в своем решении и вставил в него теперь более удобный для чтения код.
Быстрый шаг, чтобы прокомментировать тэг @script
в моем _layout
и добавить ссылку на файл test.js, и я был готов отлаживать сейчас, гораздо легче читать, кусок Javascript.
По-прежнему довольно неудобно проходить стек вызовов, хотя теперь вы можете видеть фактические методы, что делает его гораздо менее невозможным.
Ответ 2
Для всех, кто борется с этой проблемой, я нашел более легкое решение. Если вы откройте консоль разработчика (на хроме) и добавьте точку останова, где angular выдает ошибку:
![angular throwing an error]()
Затем на трассировке стека справа щелкните по первому "вызову", который вы видите. Это приведет вас к функции invoke, где первый параметр - это функция angular пытается ввести:
![I was able to inspect the function]()
Затем я выполнил поиск по моему коду для функции, которая была похожа на эту (в данном случае grep "\.onload" -R public
), и нашла 8 мест для проверки.
Надеюсь, это поможет!
Ответ 3
Для всех, кто читает это, используя Angular 1.3
Теперь вы можете использовать проверку Angular ng-strict-di следующим образом:
<div ng-app="some-angular-app" ng-strict-di>
...
</div>
Это даст вам соответствующее сообщение об ошибке, если вы не загрузили свои зависимости, используя синтаксис массива.
Ответ 4
У меня была такая же проблема, и я нашел решение, которое может быть полезно для остальных. Я предлагаю в основном то, что я видел в комментариях и документах. Если вы используете Angular 1.3.0 или выше, вы можете использовать это:
<html ng-app="myApp" ng-strict-di>
<body>
I can add: {{ 1 + 2 }}.
<script src="angular.js"></script>
</body>
</html>
В моем случае у меня есть все в файле app.js, поэтому единственное, что мне нужно сделать для поиска моих проблем с DI, это добавить этот маленький код в конец:
angular.bootstrap(document, ['myApp'], {
strictDi: true
});
Это лучше описано в Angular Документах
Надеюсь, это поможет. Удачи!
Ответ 5
Что-то, что помогло мне решить эту проблему (наконец!), уже было в документах angular! Если вы добавите атрибут ng-strict-di
к вашему коду, где бы вы не определили свой ng-app
, angular выдаст строгий предупреждение, чтобы вы могли более легко увидеть, что происходит в режиме разработки. Я бы хотел, чтобы это было по умолчанию!
См. список аргументов в нижней части документации ngApp.
https://docs.angularjs.org/api/ng/directive/ngApp
Ответ 6
Как это работает для меня, это следующее:
1) имеют два тестовых html файла спецификации (unit test) с минимальной и простой
2) убедитесь, что набор файлов находится в том же порядке, что и обычный файл спецификации (JS script)
3) убедитесь, что явным образом объявляю все зависимости (объявления массива или $inject см. http://www.ozkary.com/2015/11/angularjs-minimized-file-unknown-provider.html)
Если в файле unit test (miminized reference) есть ошибка, я могу сравнить и убедиться, что ссылка на файлы находится в правильном порядке в качестве рабочего файла.
надеюсь, что помощь.
Ответ 7
У меня была аналогичная проблема, и я потратил много времени на исследование и выяснил, что расширение Chrome Batarang, которое вводило неверный код, а ошибка в Angular выглядела точно так же. Очень жаль, что так сложно найти то, что именно вызывает проблему.
Ответ 8
У меня тоже был подобный вопрос. Решение является более точным ответом от пункта ozkary, т.е. Чтобы явно объявить все зависимости, включая "разрешающую" часть вашего маршрута.
Ниже мой код.
when('/contact/:id', {
controller: 'contactCtrl',
templateUrl: 'assets/partials/contact.html',
resolve: {
contact: ['ContactService', '$route', function(ContactService, $route) {
return ContactService.getContactDetail($route.current.params.id);
}]
}
})