Argument 'SearchController' is not a function, got undefined

Question

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);
}

Check if the file is indeed loaded successfully in the browser. — Omri Aharon

Omri Aharon Omri Aharon · Accepted Answer · 2016-08-10T18:48:00

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.

Argument 'SearchController' is not a function, got undefined

1 Answers