'ShouldWorkController' is not a function. Got undefined

Question

When I try to bind a controller to a template using the angular-ui-router $stateProvider, I run into the following error:

'ShouldWorkController' is not a function. Got undefined.

However, when I declare the controller inside the template using ng-controller, everything works fine. What could be wrong here?

app.ts

module App {

    var dependencies = [
        MyControllers            
    ]

    function configuration($stateProvider: ng.ui.IStateProvider) {

        $stateProvider
            .state("shouldWork", {
                url: "/shouldWork",
                templateUrl: "app/shouldWork.html"
                controller: "ShouldWorkController" // does not work
           });
    }
}

shouldWorkController.ts

module App.MyControllers {

    interface IShouldWorkViewModel {

    }

    class ShouldWorkController implements IShouldWorkViewModel {}

}

ShouldWork.html

<div ng-controller="ShouldWorkController as viewModel" us-spinner spinner-key="spinner-1">
                 ^ --- this works nicely

Answer 1

That message means, that such controller "ShouldWorkController" is not loaded int he main angular module. Be sure that you do call register at the end:

module App.MyControllers {    
    ...
    class ShouldWorkController implements IShouldWorkViewModel {}    
}

// we have to register this controller into some module (MyControllers)
// which is also referenced in the main app module
angular.module('MyControllers')
    .controller('ShouldWorkController', App.MyControllers.ShouldWorkController );