Bundling AngularJS

There’s lots of posts out there on how to correctly bundle angularjs with any of the popular bundling tools.  I happen to use MVC’s built in bundling.  It works for me now, though I am looking at using less and gruntjs for some additional functionality.  Here’s a recent problem that I solved.  

I would see an error that looked something like this: 

Module Error
error in component $injector
Failed to instantiate module myApp due to:
Error: [$injector:unpr] http://errors.angularjs.org/undefined/$injector/unpr?p0=n
at Error ()
at http://myapp.mysite.com/bundles/app?v=xmkhVlgjOx7Eo5ltsK1SZpAavJM1dB6-bg-ujblqCgc1:1:130753
at http://myapp.mysite.com/bundles/app?v=xmkhVlgjOx7Eo5ltsK1SZpAavJM1dB6-bg-ujblqCgc1:1:143147
at i (http://myapp.mysite.com/bundles/app?v=xmkhVlgjOx7Eo5ltsK1SZpAavJM1dB6-bg-ujblqCgc1:1:141792)
at Object.r [as invoke] (http://myapp.mysite.com/bundles/app?v=xmkhVlgjOx7Eo5ltsK1SZpAavJM1dB6-bg-ujblqCgc1:1:141964)
at http://myapp.mysite.com/bundles/app?v=xmkhVlgjOx7Eo5ltsK1SZpAavJM1dB6-bg-ujblqCgc1:1:141398
at Array.forEach (native)
at r (http://myapp.mysite.com/bundles/app?v=xmkhVlgjOx7Eo5ltsK1SZpAavJM1dB6-bg-ujblqCgc1:1:131065)
at p (http://myapp.mysite.com/bundles/app?v=xmkhVlgjOx7Eo5ltsK1SZpAavJM1dB6-bg-ujblqCgc1:1:141201)
at sf (http://myapp.mysite.com/bundles/app?v=xmkhVlgjOx7Eo5ltsK1SZpAavJM1dB6-bg-ujblqCgc1:1:143261

I was pretty confused as to what was going on, I’d properly configured all of my controllers so they used an array like [‘$http’, ‘$q’, …] for injection.  What was going on.  

It turned it out it was one simple error.  In my app.js which handles the routing, I had code looking like this:

myApp .config(function ($routeProvider) {
$routeProvider.

That turned out to be the issue.  Once i refactored it to look like this:

myApp.config([“$routeProvider”, function ($routeProvider) {
$routeProvider.

It then bundled nicely and no javascript errors.  I should have noticed immediately when it said a module error, but I didn’t.  Hopefully this post gets into google and helps someone else.

 

, , , ,

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: