Controller not defined in Typescript application after upgrading to 1.3

Question

My application has the following code:

angular.module('home', []) .controller('homeHomeController', HomeHomeController) .controller('homeContentController', HomeContentController); 

and

 class HomeHomeController { static $inject = [ '$http', 'examService', 'stateService', 'userService' ]; constructor( private $http: ng.IHttpService, private $es: IExamService, private $ss: IStateService, private $us: IUserService ) { var self = this; } } 

I just upgraded to AngularJS 1.3 and now I get this error:

 Error: [ng:areq] Argument 'HomeHomeController' is not a function, got undefined http://errors.angularjs.org/1.3.0/ng/areq?p0=HomeHomeController&p1=not%20aNaNunction%2C%20got%20undefined at http://127.0.0.1:17315/Scripts/angular.js:80:12 at assertArg (http://127.0.0.1:17315/Scripts/angular.js:1610:11) at assertArgFn (http://127.0.0.1:17315/Scripts/angular.js:1620:3) at http://127.0.0.1:17315/Scripts/angular.js:8319:9 at http://127.0.0.1:17315/Scripts/angular.js:7496:34 at forEach (http://127.0.0.1:17315/Scripts/angular.js:343:20) at nodeLinkFn (http://127.0.0.1:17315/Scripts/angular.js:7483:11) at compositeLinkFn (http://127.0.0.1:17315/Scripts/angular.js:6991:13) at publicLinkFn (http://127.0.0.1:17315/Scripts/angular.js:6870:30) at compile (http://127.0.0.1:17315/Scripts/angular-ui-router.js:3335:9) 

Here is how I do the router configuration:

 app.config([ '$httpProvider', '$locationProvider', '$sceProvider', '$stateProvider', appConfig ]); function appConfig( $httpProvider, $locationProvider, $sceProvider, $stateProvider: ng.ui.IStateProvider ) { $locationProvider.html5Mode(true); .. var home = { name: 'home', url: '/Home', views: { 'root': { templateUrl: '/Content/app/home/partials/home.html', }, 'content': { templateUrl: '/Content/app/home/partials/overview.html', }, } }; .. $stateProvider .. .state(home) ; 

The following is the loading order of the script:

 <script src="Scripts/jquery-2.1.1.min.js"></script> <script src="/Scripts/angular.js"></script> <script src="/Scripts/angular-ui-router.js"></script> ... <script src="/Content/app/home/controllers/HomeController.js"></script> <script src="/Content/app/home/home.js"></script> <script src="/Content/app/app.js"></script> <script src="/Content/app/appConfig.js"></script> <script src="/Content/app/appRun.js"></script> 

Can someone tell me if there is aproblem with how I define my controller using Typescript?

Answer 1

Despite the fact that you are describing that only changing angular JS upgrade, I would like to give you a hint how this error can be reproduced. I followed your description above and created this broken plunker with this state definition:

 var home = { name: 'home', url: '/Home', views: { 'root': { templateUrl: 'tpl.home.html', controller: 'HomeHomeController', }, 'content': { templateUrl: 'tpl.overview.html', controller: 'homeContentController', } } }; 

And since the angular controller definition (after the question):

 var app = angular.module('home', ['ui.router', 'services']) .controller('homeHomeController', HomeHomeController) .controller('homeContentController', HomeContentController); 

this gets the error:

  Error: [ng:areq] Argument 'HomeHomeController' is not a function, got undefined http://errors.angularjs.org/1.3.0/ng/areq?p0=HomeHomeController&p1=not%20aNaNunction%2C%20got%20undefined ... 

So what's wrong? controller: 'HomeHomeController',

 views: { 'root': { templateUrl: 'tpl.home.html', controller: 'HomeHomeController', 

If we commit it to controller: 'homeHomeController' (camel name), everything works

Here is an updated plunker with a working version

 var home = { name: 'home', url: '/Home', views: { 'root': { templateUrl: 'tpl.home.html', controller: 'HomeHomeController', }, 'content': { templateUrl: 'tpl.overview.html', controller: 'homeContentController', } } }; 

Answer 2

It is impossible to tell you about your question, but the most likely cause of this error is ordering.

Perhaps when you updated the version of Angular, you moved the script tag, or the new version of Angular has a slightly different execution time (i.e. it was waiting for onload and now it does not work) t).

Make sure your controller is declared before calling angular.module('home', [])...

If the two code blocks that you included are in different files, make sure that the file containing the HomeHomeController is included before the file that has the call angular.module('home', [])...