javascriptangularjsangular-route-segment

"Cannot read property 'untilResolved' of undefined" in angular-route-segment?


I am setting up a simple routing configuration with angular-route-segment and Angular is throwing this error on app load:

TypeError: Cannot read property 'untilResolved' of undefined

Neither Angular nor angular-route-segment provide anything more helpful in the way of error messages.

app.js:

(function () {
'use strict';

var app = angular.module('emailHandlerApp', [
    // Angular modules 
    'ngAnimate',        // animations
    'ngRoute',          // routing
    'ngSanitize',       // sanitizes html bindings (ex: topnav.js)

    // 3rd Party Modules
    'ui.bootstrap',     // ui-bootstrap (ex: carousel, pagination, dialog)
    'route-segment',    // angular-route-segment
    'view-segment',     // angular-route-segment
]);

console.log("app loaded"); // just for debug!

})();

config.route.js:

(function () {
'use strict';

var app = angular.module('emailHandlerApp');

// Configure the routes and route resolvers
app.config(function ($routeSegmentProvider, $routeProvider) {

    $routeSegmentProvider.options.autoLoadTemplates = true;
    $routeSegmentProvider.options.strictMode = true;

    $routeSegmentProvider

        .when('/', 'emailHandler')

        .when('/unsubscribe', 'emailHandler.unsubscribe')

        .when('/redirect', 'emailHandler.redirect')

        // Base shell
        .segment('emailHandle', {
            templateUrl: 'app/shell.html',
            controller: 'baseController',
            controllerAs: 'vm',
        })

        .within()

            // Dashboard
            .segment('unsubscribe', {
                templateUrl: 'app/unsubscribe/unsubscribe.html',
                controller: 'unsubscribeController',
                controllerAs: 'vm',
                dependencies: ['emailId']
            })


            // Recruiting
            .segment('redirect', {
                templateUrl: 'app/redirect/redirect.html',
                controller: 'redirectController',
                controllerAs: 'vm',
                dependencies: ['rdId']
            })
    ;

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

Solution

  • Answering my own question because I'm 99% sure I'll probably Google this again a month from now.

    This one is super simple - just a matter of code blindness and a slightly uninformative error message. angular-route-segment throws this when there's a name out of place somewhere in your segment tree.

    In my case, I had mistyped .segment('emailHandle', { ... }) when I meant emailHandler, and then it barfed once it hit the .within(). I felt pretty dumb once I saw it.