Super Beginner Guide to AngularJS - Uncaught Object

OK, I will admit. I am just starting out learning AngularJS and already spent numerous hours where an experienced programmer won't step into. Well, just a few months from now, though, I won't be in that situation, nor I would remember the kind of traps I got into. So it's time to blog about them because if I ran into them, you would too.

What to Do If You Get Uncaught Object on Chrome Console

So your text book author said, "you can test in any browser you choose so long as it is Chrome." And you believed it, didn't you. You tried your first program, and you get the following message in the JavaScript console.

Uncaught object
  (anonymous function) angular.js:78
  (anonymous function) angular.js:1751
  ensure angular.js:1675
  module angular.js:1749
  (anonymous function) app.html:9

Unlike a debugging in C# or Java, it does not tell you where and what the issue is. Very frustrating. You even set a breakpoint where the issue was found and it says "missing ngLocale" module to that effect when you have not even plan to reference such a module in your code.

This turns out to be a current (as of July 2014) bug in Chrome. May be it has been fixed by the time you read this, but it goes to say that when debugging JavaScript it might be worthwhile trying another browser than just Chrome. Especially Firefox and IE are great choices as the JavaScript implementation is totally different from Chrome or Webkit based.

Error: [$injector:nomod] Module 'undefined' is not available! You have either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.3.0-beta.11/$injector/nomod?p0=undefined angular.js
Error: [$injector:nomod] Module 'mtSample' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.3.0-beta.11/$injector/nomod?p0=mtSample angular.js

Now at least here the debug console output will be more specific as to the nature of the problem. For above example, I have purposely eliminated a comma after "mtSample" from angular.module("mtSample" ["ngRoute"]).

Go Ahead, Try the IE too!

I know, I know, we are supposed to sit and code at Petes with our latest Mac Books and bash the IE ( I am writing this artile on my iMac by the way). But you will be surprised to know how much changes Microsoft has made to embrace the latest open source technology. You can even run Linux on Microsoft Azure now!

So, even on the IE, the message is clear! In fact, it is the cleanest and clearest of all in this specific example. So at least, let's give some hands to the Micrsoft folks. We should not lose a sight that as software engineers our task is to get our job done. I would use any tool I can lay my hands on.

A Side Note - Do Not Mix and Match Angular Libraries

I have accidentally mixed in additional Angular components (like routing package) from the latest into the rest which was in a pervious version. If you do this, you will run into a very similar issue. When in doubt, refresh the complete AngularJS library to the same perstine version.


... to be continued.