Angular Uncaught Object

Question

I'm new to Angular so i'm still getting my head around how it works. I've stumbled into a problem however (quite early on...) and the below code is giving me "Uncaught Object" in the console and breaks Angular. The .config section is the culprit, if I remove it, the page loads fine. I'm not entirely sure how the error is being caused because to me, everything looks fine?

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

    .config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
        $routeProvider
            .when('/dashboard', {
                templateUrl: '/app/views/admin.html',
                controller: 'DashboardController'
            })
            .otherwise('/', {
                redirectTo: '/'
            })

        $locationProvider.html5mode(true);
    }])

    .controller('DashboardController', ['$scope', function ($scope, Security) {
        $scope.security = Security;
    }])

Answer 1

I had the same error; if you activate Chrome to pause on exceptions, you'll be able to have more detailed error information

Answer 2

.otherwise takes only one parameter - an object which contains information on what needs to be done for routes that are not defined.

In your case, you seem to be passing a route to it in addition to an object.

Replace:

.otherwise('/', {
    redirectTo: '/'
})

with

.otherwise({
    redirectTo: '/dashboard'
});

Note that you need to redirect to a path that exists. '/' is a path that does not exist. '/dashboard' is a path that does, hence you redirect to it. Or, define a handler for '/' path

Answer 3

I'm posting my own solution, as several factors seem to be behind this issue and nobody has talked about this so far.

That is, try to write your code outside of $.ready();

<script>
$(function(){
  // This leaves "Uncaught object" error in Chrome!
  // var app = angular.module('testApp', ['ngRoute']);
});

// So get it out of $.ready()!! 
var app = angular.module('testApp', ['ngRoute']);
</script>