Argument is not a function, got undefined with angular bootstrap, ui-router and requirejs

Question

I am following Dan Wahlin's example of dynamically loading controllers using requirejs but with angular ui-router.

this is my app.js

var bootstrapper = angular.module('etrading', ['ui.router', 'ngSanitize','kendo.directives', 'common']);

function routeProvider($stateProvider, $controllerProvider, $compileProvider, $filterProvider, $provide, routeResolverProvider) {
    $provide.decorator('$exceptionHandler', extendExceptionHandler);
    bootstrapper.register = {
        controller: $controllerProvider.register,
        directive: $compileProvider.directive,
        filter: $filterProvider.register,
        factory: $provide.factory,
        service: $provide.service
    };
    var route = routeResolverProvider.route();
    $stateProvider.state('etrading', route.resolve('shell', 'core/',  'vm')).state('equityportfolio', route.resolve('equityportfolio', 'equityportfolio/', 'vm'));
}

bootstrapper.config([
    '$stateProvider',
    '$controllerProvider',
    '$compileProvider',
    '$filterProvider',
    '$provide',
    'routeResolverProvider',
     routeProvider
]);

start.$inject = ['$state', '$rootScope', '$q', 'genXClientFactory'];
function start($state, $rootScope, $q) {
    //set the initial state
    $state.go('etrading');
}
bootstrapper.run(start);

this is my main.js for angular bootstrap

   define([
    'app',
    'common/common',
    'common/routeresolver',
    'common/logger',
    'common/commonfactory',
    'common/spinner',
    'common/genxInitializer',
    'common/route'
],
function () {
    angular.element(document).ready(function () {
        angular.bootstrap(document, ['etrading']);
    });
});

this is my routeresolver.route method

    var route = function () {
        function resolve(baseName, path, controllerAs, secure) {
            if (!path)
                path = '';
            var routeDef = {};
            var baseFileName = baseName.charAt(0).toLowerCase() + baseName.substr(1);
            routeDef.templateUrl = viewsDirectory + path + 'views/' + baseFileName + '.html';
            routeDef.controller = baseName + 'Controller';
            if (controllerAs)
                routeDef.controllerAs = controllerAs;
            routeDef.secure = (secure) ? secure : false;
            routeDef.resolve = {
                load: [
                    '$q',
                    '$rootScope',
                    function ($q, $rootScope) {
                        var dependencies = [controllersDirectory + path + 'controllers/' + baseFileName + 'Controller.js'];
                        return resolveDependencies($q, $rootScope, dependencies);
                    }
                ]
            };
            return routeDef;
        }
        function resolveDependencies($q, $rootScope, dependencies) {
            var defer = $q.defer();
            require(dependencies, function () {
                defer.resolve();
                 $rootScope.$apply();
            });
            return defer.promise;
        }
        var jsclass = {
            resolve: resolve
        };
        return jsclass;
    };

and this is the controller that i am trying to register

define(["require", "exports", 'app'], function (require, exports, app) {
var core;
(function (core) {
    var controller;
    (function (controller) {
        var Shell = (function () {
            function Shell($rootScope, common, config) {
            }
            Shell.$inject = ['$rootScope', 'common', 'config'];
            return Shell;
        })();
        controller.Shell = Shell;
        app.etrading.register.controller('shell', Shell);
    })(controller = core.controller || (core.controller = {}));
})(core = exports.core || (exports.core = {}));
});

I am getting this: Error: [ng:areq] Argument 'shellController' is not a function, got undefined this is when trying to resolve the dependencies. Please help me with this. Thanks.

Answer 1

Figured out that after ui-router's routesuccess it check if the controller name is same as controller defined in the state change.

controller name has to be

 app.etrading.register.controller('shellController', Shell);

and not app.etrading.register.controller('shell', Shell);