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.
Mythical Code 