Debugging Angular

Question

I've been wondering, whenever Angular logs error it's a pile of gibberish similar to this:

Error: [ng:areq] Argument 'AppController' is not a function, got undefined
http://errors.angularjs.org/1.2.23/ng/areq?p0=AppController&p1=not%20a%20function%2C%20got%20undefined
    at http://localhost/NAME/vendors/angular/angular.js:78:12
    at assertArg (http://localhost/NAME/vendors/angular/angular.js:1509:11)
    at assertArgFn (http://localhost/NAME/vendors/angular/angular.js:1519:3)
    at http://localhost/NAME/vendors/angular/angular.js:7271:9
    at http://localhost/NAME/vendors/angular/angular.js:6663:34
    at forEach (http://localhost/NAME/vendors/angular/angular.js:332:20)
    at nodeLinkFn (http://localhost/NAME/vendors/angular/angular.js:6650:11)
    at compositeLinkFn (http://localhost/NAME/vendors/angular/angular.js:6098:13)
    at compositeLinkFn (http://localhost/NAME/vendors/angular/angular.js:6101:13)
    at compositeLinkFn (http://localhost/NAME/vendors/angular/angular.js:6101:13) 

How do I know which line of MY code (not angular source code) triggered the error? Adding breakpoints or Batarang isn't helping.

Edit

I don't have problem with this specific error. There are cases where angular logs a line number, say Controller.js:1183:48, and cases where it doesn't. What makes the difference? And in latter cases, how do I find out MY error line?

Answer 1

1. If the problem is a run-time error inside one of your controllers you'll get the line number.

2. If it's a problem interpreting something inline {{ like.this() }} or a problem with an expression in a directive (ex: ng-repeat='foo in undefinedBar'), or any other expression not running inside a script tag or reference, then you'll get the line of code from the angular framework where the error was first encountered (usually either the directive itself or the core).

3. If one of your controllers simply doesn't parse due to incorrect syntax, it will tell you it can't even load the module. This also applies if there actually is a problem with how your app is set up, but I assume this question is for the times when you're trying to track down a hard-to-find error in a controller or view.

Usually when I experience #2 (most common source of frustration) I look for clues as to what type of error it is (maybe a collection wasn't defined if it tells me "length" was undefined, for instance). Usually the problem is tied to either bad syntax or my controller models not being in a state I expected.

Answer 2

You can click on :-

http://errors.angularjs.org/1.2.23/ng/areq?p0=AppController&p1=not%20a%20function%2C%20got%20undefined

This link ( 2nd line ) of the error. It would open the error description on the angular js website.

For example, in your case the error is :

Argument 'AppController' is not a function, got undefined

Which mean you have a typo in your controller or you have not made the controller at all. You can see this error once you click on that link.

Edit: If there is a error pertaining to your code like something undefined. You get a link to reach your code line as well. Following is a example of such a error, where a variable is undefined.

TypeError: Cannot read property 'filetype' of undefined
    at Object.fn (http://localhost:8080/techpedia/js/Controller.js:1183:48)
    at k.$digest (http://localhost:8080/techpedia/js/angular.min.js:109:403)
    at k.$apply (http://localhost:8080/techpedia/js/angular.min.js:112:398)
    at http://localhost:8080/techpedia/js/angular.min.js:18:270
    at Object.d [as invoke] (http://localhost:8080/techpedia/js/angular.min.js:35:36)
    at c (http://localhost:8080/techpedia/js/angular.min.js:18:178)
    at fc (http://localhost:8080/techpedia/js/angular.min.js:18:387)
    at Xc (http://localhost:8080/techpedia/js/angular.min.js:17:415)
    at HTMLDocument.<anonymous> (http://localhost:8080/techpedia/js/angular.min.js:214:144)
    at l (http://localhost:8080/techpedia/js/foundation.min.js:18:16937) 

The link will point out the line number in your code.

http://localhost:8080/techpedia/js/Controller.js:1183:48