Redirecting state: null is not an object (evaluating 'name')

Question

When a user enters the state cloud, it checks if a current variable is found, and if it isn't, it redirects them to a different state. But for some reason, I get the following error on the redirect.

If I just go directly to /new, it does not give me the error. Only when the redirect occurs.

Does anyone know what the issue might be?

.config(function($stateProvider, $urlRouterProvider, $locationProvider) {

    $locationProvider.html5Mode(true);
    $urlRouterProvider.otherwise('/cloud');

    var billable = ['$rootScope', '$state', function ($rootScope, $state) { 
        if(!$rootScope.billable) $state.go('new'); 
    }];

    $stateProvider

    .state('new', {
        url: '/new',
        views: { 'main': { templateUrl: 'pages/templates/new.html', controller: 'new' } },
    })

    .state('cloud', {
        url: '/cloud',
        views: { 'main': { templateUrl: 'pages/templates/cloud.html', controller: 'cloud' } },
        onEnter: billable
    })

})

Error: null is not an object (evaluating 'name') updateView@http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js:3953:87 http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js:3924:21 $broadcast@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js:14720:33 load@http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js:3678:32 http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js:3554:30 proceed@http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js:474:48 invoke@http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js:470:33 http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js:449:20 http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js:3557:46 forEach@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js:331:24 resolveViews@http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js:3551:16 processQueue@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js:13189:29 http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js:13205:39 $digest@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js:14217:36 http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js:14440:33 completeOutstandingRequest@http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js:4905:15 http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js:5285:33

have you tried moving billable into .run() instead of defining it in config? — aaronmallen

aaronmallen aaronmallen · Accepted Answer · 2017-01-21T00:43:09

The way you have this configured, I don't believe any states have been defined yet because the application has not yet been bootstrapped. Additionally, route redirects like this are typically placed in the run method, not in the config.

You could pass billable (as a boolean or whatever you need it to be) in the params of the url and redirect based on that.

i.e.

// I'm assuming you're using UI-Router  
.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {
    $locationProvider.html5Mode(true);
    $urlRouterProvider.otherwise('/cloud');
    $stateProvider
    .state('new', {
        url: '/new',
        views: { 'main': { templateUrl: 'pages/templates/new.html', controller: 'new' } },
    })
    .state('cloud', {
        url: '/cloud?billable',
        views: { 'main': { templateUrl: 'pages/templates/cloud.html', controller: 'cloud' } },
    })   
}])
.run(['$rootScope', '$state', function($rootScope, $state) {
  $rootScope.$on("$stateChangeStart", function(e, toState, toParams, fromState, fromParams) {
    if (!toParams.billable) {
      e.preventDefault();
      $state.go('new');
    }
  });
}]);

Redirecting state: null is not an object (evaluating 'name')

1 Answers