Angular app not working when minified (possibly ng route or something else)

Question

I have an app that works unminified but when using uglify to combine angular, angular_routes and my script.js, I get an injector error. Ive done the inline annotating for the controllers using $inject like this:

 var app = angular.module('app', ['ngRoute']);

 mainController.$inject = ['$scope', '$http', '$window', '$location'];

 app.controller('mainController', mainController);

 function mainController($scope, $http, $window, $location) {
   $window.ga('send', 'pageview', { page: $location.url() });
     }

Do i have to do anything with ng-routes? or app.run? here is the code:

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

            // route for the home page
            .when('/', {
                templateUrl : 'pages/home.html',
                controller  : 'mainController'
            })

app.run part:

app.run(function ($rootScope, $location) {///

the full code is here if you want to see it: http://stephenbreighner.com/script.js

thanks

Answer 1

Angular's dependency injection works based on the name of the parameters, for example $scope. When minified, it will be called some non-readable name like b, so angular won't be able to lookup what should be injected. To fix this use the array notation:

app.config(["$routeProvider", function($routeProvider) {
    $routeProvider

        // route for the home page
        .when('/', {
            templateUrl : 'pages/home.html',
            controller  : 'mainController'
        })
}])

And

app.run(["$rootScope", "$location", function ($rootScope, $location) {///