Hard to trace real root cause under chrome dev tools - angularjs

I've changed dozens of controllers, services, and html
And got an Unknown provider exception
Unknown provider: bankServiceProvider <- bankService <- BanksBaseCtrl
However, it didn't tell me this is due to which file.
The debug message on chrome console is helpless.
Is there any useful way to trace the buggy source file?
Thanks so much
angular.js:12477 Error: [$injector:unpr] Unknown provider: bankServiceProvider <- bankService <- BanksBaseCtrl
http://errors.angularjs.org/1.4.7/$injector/unpr?p0=bankServiceProvider%20%3C-%20bankService%20%3C-%20BanksBaseCtrl
at http://dev.co/libs/angular/angular/angular.js:68:12
at http://dev.co/libs/angular/angular/angular.js:4289:19
at Object.getService [as get] (http://dev.co/libs/angular/angular/angular.js:4437:39)
at http://dev.co/libs/angular/angular/angular.js:4294:45
at getService (http://dev.co/libs/angular/angular/angular.js:4437:39)
at Object.invoke (http://dev.co/libs/angular/angular/angular.js:4469:13)
at extend.instance (http://dev.co/libs/angular/angular/angular.js:9136:34)
at nodeLinkFn (http://dev.co/libs/angular/angular/angular.js:8248:36)
at compositeLinkFn (http://dev.co/libs/angular/angular/angular.js:7680:13)
at publicLinkFn (http://dev.co/libs/angular/angular/angular.js:7555:30) <div ui-view="" class="fade-in ng-scope">


It means you injected bankService into BanksBaseCtrl and angular couldn't resolve bankService.
Verify that you properly registered bankService (with that exact name) with the angular module:
angular.module('yourapp').service('bankService',function(){...});
or, alternatively, correct the injected service name within BanksBaseCtrl.

Related

How to upgrade from angular-strap-0.7.5

I've inherited a project using angular-strap-0.7.5.
I've upgraded Angular from 0.10 to 1.6.4, and resolved most of the problems (very few, btw).
However, bsPopover is crashing and here's the stack trace:
angular.js:14525 Error: [$http:badreq] Http request configuration url must be a string or a $sce trusted object. Received: undefined
http://errors.angularjs.org/1.6.4/$http/badreq?p0=undefined
at http://localhost.auspost.com.au:4445/lib/js/vendor/node_modules/angular/angular.js:66:12
at $http (http://localhost.auspost.com.au:4445/lib/js/vendor/node_modules/angular/angular.js:11967:30)
at Function.$http.(anonymous function) [as get] (http://localhost.auspost.com.au:4445/lib/js/vendor/node_modules/angular/angular.js:12237:18)
at Object.postLink [as link] (http://localhost.auspost.com.au:4445/lib/js/vendor/angular-strap-0.7.5/angular-strap.js:564:71)
at http://localhost.auspost.com.au:4445/lib/js/vendor/node_modules/angular/angular.js:1346:18
at invokeLinkFn (http://localhost.auspost.com.au:4445/lib/js/vendor/node_modules/angular/angular.js:10426:9)
at nodeLinkFn (http://localhost.auspost.com.au:4445/lib/js/vendor/node_modules/angular/angular.js:9815:11)
at compositeLinkFn (http://localhost.auspost.com.au:4445/lib/js/vendor/node_modules/angular/angular.js:9055:13)
at compositeLinkFn (http://localhost.auspost.com.au:4445/lib/js/vendor/node_modules/angular/angular.js:9058:13)
at nodeLinkFn (http://localhost.auspost.com.au:4445/lib/js/vendor/node_modules/angular/angular.js:9809:11) "
<span class="remove ng-scope" generic-modal="/content/projects/modal/project-delete.html" ng-click="deleteProject=listProject" bs-popover="popover.content" data-placement="left" data-content="Delete this project" data-trigger="hover">"
I've tried upgrading to this one: http://mgcrea.github.io/angular-strap/
Now I don't get a stack trace or any errors, but the popover just shows the dark background (mask) and does nothing else.
Anyone got a simple answer?

Angular Unknown provider error: what's the meaning of the chain of functions, mentioned in error message?

I get an error from Angular:
angular.js:68 Uncaught Error: [$injector:unpr] Unknown provider: utilProvider <- util <- AuthInterceptor <- $http <- $templateFactory <- $view <- $state
I'm trying to localize the error, but I don't understand the meaning of chain of functions that the error message mensions:
utilProvider <- util <- AuthInterceptor <- $http <- $templateFactory <- $view <- $state
Can you explain, what are these guys? What's the order of them? It looks like a dependency stack, but is it right-to-left or left-to-right?
This error stack is to be read Left to Right.
It doesn't necessarily mean error is in the first object, it rather means error occured when trying to use that first object.
Angular generated error stack offers link to previous error, and you can trace your bug to its origin.
If you are developing in Chrome, the link is clickable in console and leads to Angular website where you can see some description of the error and most common causes.

Error: [$injector:unpr] http://errors.angularjs.org/1.3.4/$injector/unpr?p0=%24ngMapProvider%20%3C-%20%24ngMap at Error (native)

I get following error when I run my application. Just want to know what this means if anyone has experienced with the same?
Error: [$injector:unpr] http://errors.angularjs.org/1.3.4/$injector/unpr?p0=%24ngMapProvider%20%3C-%20%24ngMap
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js:6:416
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js:38:22
at Object.d [as get] (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js:36:49)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js:38:94
at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js:36:49)
at e (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js:36:310)
at Object.instantiate (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js:36:451)
at $get (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js:75:409)
at http://localhost:11080/angularui/ui-bootstrap-tpls-0.12.0.min.js:8:29473
NOTE: Code is bit complex to publish here.
You're trying to inject/use ngMapProvider in a place where it isn't correctly included as a dependency.
See: https://docs.angularjs.org/error/$injector/unpr

Unsure what Unknown Provider: $attrsProvider <- $attrs means?

I am encountering the following error when I run my Karma Unit Tests:
Error: [$injector:unpr] Unknown provider: $attrsProvider <- $attrs
http://errors.angularjs.org/1.2.16/$injector/unpr?p0=%24attrsProvider%20%3C-%20%24attrs
at /home/ubuntu/vantage/core/static/core/js/lib/angular.js:78:12
at /home/ubuntu/vantage/core/static/core/js/lib/angular.js:3705:19
at Object.getService [as get] (/home/ubuntu/vantage/core/static/core/js/lib/angular.js:3832:39)
at /home/ubuntu/vantage/core/static/core/js/lib/angular.js:3710:45
at getService (/home/ubuntu/vantage/core/static/core/js/lib/angular.js:3832:39)
at invoke (/home/ubuntu/vantage/core/static/core/js/lib/angular.js:3859:13)
at Object.instantiate (/home/ubuntu/vantage/core/static/core/js/lib/angular.js:3880:23)
at /home/ubuntu/vantage/core/static/core/js/lib/angular.js:7134:28
at null.<anonymous> (/home/ubuntu/vantage/ecommerce/js_tests/unit/progress/progressControllersSpec.js:12:20)
at Object.invoke (/home/ubuntu/vantage/core/static/core/js/lib/angular.js:3869:17)
Error: Declaration Location
at window.inject.angular.mock.inject (/home/ubuntu/vantage/core/static/core/js/lib/angular-mocks.js:2132:25)
at null.<anonymous> (/home/ubuntu/vantage/ecommerce/js_tests/unit/progress/progressControllersSpec.js:10:20)
at null.<anonymous> (/home/ubuntu/vantage/ecommerce/js_tests/unit/progress/progressControllersSpec.js:5:5)
at /home/ubuntu/vantage/ecommerce/js_tests/unit/progress/progressControllersSpec.js:3:1
TypeError: Cannot call method 'expectGET' of undefined
at null.<anonymous> (/home/ubuntu/vantage/ecommerce/js_tests/unit/progress/progressControllersSpec.js:380:18)
Chrome 33.0.1750 (Linux): Executed 42 of 45 (1 FAILED) (0 secs / 0.483 secs)
Chrome 33.0.1750 (Linux) Unit Test: ProgressController ProgressController should expect showDetailedSection to be false on initialization FAILED
Error: [$injector:unpr] Unknown provider: $attrsProvider <- $attrs
Anyone know what this means exactly and how to fix it?
Thanks :)
The solution to this ended up being pretty obscure.
The issue was that the bootstrap-ui package actually has a ProgressController in it. So our controller got stomped on. The test was trying to create an instance of our ProgressController but ended up with the one from bootstrap-ui.
Simply renaming our controller fixed everything.

AngularJS linky filter throws an "Unknown Provider" error

Here is the JSFiddle that shows what I'm doing, simply adding a filter to name.
http://jsfiddle.net/9Z5SJ/1/
Error: Unknown provider: linkyFilterProvider <- linkyFilter
at Error (unknown source)
at http://code.angularjs.org/angular-1.0.0rc10.js:2530:15
at Object.getService [as get] (http://code.angularjs.org/angular-1.0.0rc10.js:2658:39)
at http://code.angularjs.org/angular-1.0.0rc10.js:2535:45
at Object.getService [as get] (http://code.angularjs.org/angular-1.0.0rc10.js:2658:39)
at http://code.angularjs.org/angular-1.0.0rc10.js:8956:24
at filter (http://code.angularjs.org/angular-1.0.0rc10.js:5744:14)
at _filterChain (http://code.angularjs.org/angular-1.0.0rc10.js:5735:41)
at statements (http://code.angularjs.org/angular-1.0.0rc10.js:5711:25)
at parser (http://code.angularjs.org/angular-1.0.0rc10.js:5644:13)
Documentation on the linky filter
http://docs.angularjs.org/api/angular.module.ngSanitize.filter.linky
You need to load and include the "sanitize" module to use "linky":
Look for these two things:
1. I added "http://docs.angularjs.org/angular-sanitize-1.0.0rc10.min.js" as a resource
2. I linked it into my module by adding "ngSanitize" to angular.module('myApp',['ngSanitize']);
See here:
http://jsfiddle.net/johnlindquist/y2eJL/

Resources