TypeScript in a JavaScript Angular Project - Argument is 'SearchCtrl' is not a function or is undefined

Question

I'm trying to set up an angular search controller in a project that has existing JavaScript code, using TypeScript.

below is my controller.

/// <reference path="../Models/ISearchSrvc.ts" />
/// <reference path="../Services/searchSrvc.ts"/>
module GLA.Controllers {
    export class SearchCtrl {
        searchService: Services.SearchSrvc;
        searchTerms: string;
        pattern: RegExp = /^\s*\w*\s*$/;
        static $inject = ["Services.SearchSrvc"];
        constuctor(service: Services.SearchSrvc) {
            this.searchService = service;
        }
        searchResults: Models.IResultsContainer;
        getSearch = () => {
            this.searchResults = this.searchService.search(this.searchTerms);
        }
    }
    angular.module("GLA").controller("GLA.Controllers.SearchCtrl", SearchCtrl);
}

I then import them in the shared _Layout page of the project

<script src="~/Angular/Services/searchSrvc.js"></script>
<script src="~/Angular/Controllers/searchCtrl.js"></script>

Then when use ng-controller to define a div I want to use the controller on, I get Argument 'SearchCtrl' is not a function, got undefined,

However, if I create a controller in JS, like below:

GLA.controller('testCtrl',['$scope','searchSrvc', function($scopt, searchSrvc) {
$scopt.whatwhat = "whatwhat!!";
}])

This controller can be used on any Div within my project. Any kind of help would be really appreciated!

I have been over this with other developers and as no one bar myself has done much in TypeScript, we've not had any luck, however I am certain other parts have been implemented correctly, its just the issue of a typescript controller in a JavaScript project maybe?

Below is the compiled Controller:

/// <reference path="../Models/ISearchSrvc.ts" />
/// <reference path="../Services/searchSrvc.ts"/>
alert("loaded");
var GLA;
(function(GLA) {
    var Controllers;
    (function(Controllers) {
        var SearchCtrl = (function() {
            function SearchCtrl() {
                var _this = this;
                this.pattern = /^\s*\w*\s*$/;
                this.getSearch = function() {
                    _this.searchResults = _this.searchService.search(_this.searchTerms);
                };
            }
            SearchCtrl.prototype.constuctor = function(service) {
                this.searchService = service;
            };
            SearchCtrl.$inject = ["Services.SearchSrvc"];
            return SearchCtrl;
        }());
        Controllers.SearchCtrl = SearchCtrl;
        angular.module("GLA").controller("GLA.Controllers.SearchCtrl", SearchCtrl);
    })(Controllers = GLA.Controllers || (GLA.Controllers = {}));
})(GLA || (GLA = {}));
//# sourceMappingURL=searchCtrl.js.map

Have you looked at the generated JavaScript from the TypeScript source ? — Bludwarf
– Bludwarf, Commented Jan 25, 2017 at 14:00
@MiteshPant The only error in the console is the one that refers to the Controller not being a Function/Undefined :-/ — Baulers
– Baulers, Commented Jan 25, 2017 at 14:58
@Bludwarf I have, I'm very new to JavaScript, so not completely sure what I'm looking at. I find typescript a little easier because of its similarities with C# and other OOP languages. I'll add the controller to the question, I've added an alert to make sure its being loaded. — Baulers
– Baulers, Commented Jan 25, 2017 at 15:00
Not sure if it's the cause, but you have a typo in your constRuctor method constuctor(service: Services.SearchSrvc) — Matt M
– Matt M, Commented Jan 25, 2017 at 15:31

Baulers · Accepted Answer · 2017-03-20 13:30:12Z

0

I worked it out eventually,

below is the line that was causing me grief:

angular.module("GLA").controller("GLA.Controllers.SearchCtrl", SearchCtrl);

Changed it to:

angular.module("GLA").controller("SearchCtrl", SearchCtrl); removing the GLA.Controllers

This made controller available globally, however I am unsure what this string represents, or why it was invalid with the GLA.Controller, as I have built it similarly in other projects.

answered Mar 20, 2017 at 13:30

Baulers

1085 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

TypeScript in a JavaScript Angular Project - Argument is 'SearchCtrl' is not a function or is undefined

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related