Подтвердить что ты не робот

Отладка неизвестного поставщика в миниатюре angular javascript

Мне сложно определить, какие из методов, которые у меня есть в моем приложении angular, которые вызывают ошибку:

Uncaught Error: [$injector:unpr] Unknown provider: nProvider <- n

Это происходит только после того, как javascript был добавлен и уменьшен ASP.Net.

Я убедился, что все контроллеры и любой другой DI используют метод минимизации, I.E Мои контроллеры/службы и т.д. используют метод:

appControllers.controller('myCtrl', ['$scope', function($scope){
        //......
}]);

Я прошел через каждый JS файл в нашем приложении - там много... и не может найти ничего, что нарушает этот способ инъекции зависимостей - хотя должно быть где-то...

Есть ли лучший способ определить, какой метод может вызвать эту ошибку?

Спасибо

4b9b3361

ОТВЕТЫ

Ответ 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);
         }]
      }
})