monstro monstro - 3 months ago 41
TypeScript Question

Argument 'SearchController' is not a function, got undefined

Here is the code I have, greatly simplified,
and my question is - why am I getting this error message?


[ng:areq] Argument 'SearchController' is not a function, got undefined

http://errors.angularjs.org/1.5.8/ng/areq?p0=SearchController&p1=not%20aNaNunction%2C%20got%20undefined


index.cshtml

<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="~/Components/angular/angular.min.js"></script>
<script src="~/Scripts/Common/app.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>


app.ts

namespace App {

export let app = angular.module("app", ["ngRoute", "ngSanitize"]);

// Defined custom routes for using "ng-view" directive,
// enable single page application (SPA) functionality

app.config(function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "/RealSuiteApps/RealForm/-1/MyForm/Search/",
controller: "SearchController",
controllerAs: "vm"
})
.when("/Detail/:id", {
templateUrl: "/RealSuiteApps/RealForm/-1/MyForm/Detail/",
controller: "DetailController",
controllerAs: "vm"
})
.otherwise({ redirectTo: "/" });
});
}


search.cshtml - the HTML returned by calling templateUrl defined above: /RealSuiteApps/RealForm/-1/MyForm/Search/ (simplified for this demo)

<script src="~/Scripts/MyForm/search.controller.js"></script>

<div class="container">

<h1>Hello from Search Controller</h1>

</div>


the controller search.controller.js

namespace App {

/**
* SearchController
*/
class SearchController {

static $inject: string[] = ["DataService"];

constructor(private dataService: DataService) { }

}

app.controller("SearchController", SearchController);
}

Answer

Looks like you're loading the search.controller.js file only in your search view, but the route instantiates the controller even before that, and he can't do that if you haven't loaded the script yet.

The solution is to load it at the beginning of your app.