angular-ui-router error - Error: invalid 'handler' in when()

Question

I am using angular 1.5 and angular-ui-router version 0.2.18

My app.js file looks like this:

import angular from 'angular';
import uiRouter from 'angular-ui-router';
import 'angular-ui-bootstrap';
import './components/logIn/logIn';
import './components/home/home';

    angular.module('app', ['ui.bootstrap', 'app.components', uiRouter])
      .controller('mainCtrl', function() {
      })
      .config(['$stateProvider', '$urlRouterProvider', '$urlMatcherFactoryProvider', function($stateProvider,   $urlRouterProvider,   $urlMatcherFactoryProvider){
        $urlRouterProvider
          .when('/home', {
            template: '<home></home>'
          })
          .otherwise({
            redirectTo: '/home'
          });
      }]);

I get the following error:

Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to: Error: invalid 'handler' in when() at $UrlRouterProvider.when (eval at (http://localhost:8080/app.bundle.js:511:2), :1916:13) at eval (eval at (http://localhost:8080/app.bundle.js:493:2), :20:22) at Object.invoke (eval at (http://localhost:8080/app.bundle.js:505:2), :4604:19) at runInvokeQueue (eval at (http://localhost:8080/app.bundle.js:505:2), :4497:35) at eval (eval at (http://localhost:8080/app.bundle.js:505:2), :4506:11) at forEach (eval at (http://localhost:8080/app.bundle.js:505:2), :321:20) at loadModules (eval at (http://localhost:8080/app.bundle.js:505:2), :4487:5) at createInjector (eval at (http://localhost:8080/app.bundle.js:505:2), :4409:19) at doBootstrap (eval at (http://localhost:8080/app.bundle.js:505:2), :1691:20)

I think it is the template property. Is it not possible to set the templat like this?

Omri Aharon Omri Aharon · Accepted Answer · 2016-02-16T08:10:45

I think you are confusing urlRouterProvider with routeProvider.

The latter is used to define the routes (and their templates among ther rest). You use the first one to do redirects for when a URL isn't matched (either as a string or a function). The otherwise you used belongs to the $routeProvider as well.

So just switch and you should be good to go:

$routeProvider.when('/home', {
    template: '<home></home>'
});

// or $urlRouterProvider.otherwise('/home');
$routeProvider.otherwise({ redirectTo: '/home' });

angular-ui-router error - Error: invalid 'handler' in when()

1 Answers