Solution for when AngularJS is not working at all, & angular.bootstrap() throws weird errors

I was working on a small AngularJS demo today, when I found the following is not working:

As you can see that’s just an empty Angular app. I was trying in Plunker, I tried JSBin and same. I was very anxious.

Looking at the console, I saw an “undefined is not a function” error, deep in some AngularJS code, and a few other quirky errors as well about minified code (although my version of Angular wasn’t minified).

I couldn’t tell what was going on, till I did some googling, and found something worth sharing here.

Turns out the bootstrap call needed to be after the DOM content has been fully loaded, this is the “ready” jQuery event if you use it, or the “DOMContentLoaded” event in plain JavaScript.

So, to make this line work, all I needed to do is write the following:

If you are using jQuery, you could also alternatively write:

Just passing a function to jQuery will be equal to $(document).on("ready", myFunction).

Sharing this here to save someone else the confusion I had!

Share With Friends:

P.S. Please help me out by checking this offer, then look below for a small Thank You.

How did I learn that?

As a bonus for coming here, I'm giving away a free newsletter for web developers that you can sign up for from here.
It's not an anything-and-everything link list. It's thoughtfully collected picks of articles and tools, that focus on Angular 2, ASP.NET 5, and other fullstack developer goodies.

  • Islam Elkhayat

    I used to reference all my AngularJS files at the end of the page… this will help you avoid alot of wired errors