In my MVC 5 project, I am using TypeScript and angular. There are three TS files: Controller1.ts, Controller2.ts, and app.ts. The issue arises when I compile the program for the first time - everything usually compiles correctly in the expected order. However, upon making a change and triggering a recompile, the ordering of classes in the outputted app.js file changes. This results in the contents of app.ts (where the angular app is created) running before one or both controllers are defined, leading to this error:
[ng:areq] Argument 'ProviderScorecardController' is not a function, got undefined
Here is how my app.ts file is structured:
/// <reference path="_app.d.ts" />
module mqApp {
'use strict';
if (typeof (angular) != "undefined") {
var modules = [];
angular.module("mqApp", modules)
.controller("Controller1", Controller1)
.controller("Controller2", Controller2);
}
}
The structure of both controllers is similar, differing only in the class name:
/// <reference path="../../_app.d.ts" />
module mqApp {
'use strict';
export class Controller1 {
public static $inject = [
'$scope'
];
private scope: angular.IScope;
constructor($scope: angular.IScope) {
this.scope = $scope;
console.log("Master Controller Instantiated");
}
}
}
My _app.d.ts file, which is referenced from the above TS file, looks like this:
/// <reference path="_references.d.ts" /> [This just contains angular/jquery references]
/// <reference path="code/controllers/Controller2.ts" />
/// <reference path="code/controllers/Controller1.ts" />
/// <reference path="app.ts" />
Despite changing the order of the references, the issue persists. What could be causing this inconsistency in compiling the correct order?
The project utilizes Angular 1.6 and TypeScript 1.8.