Cannot extend angularjs controller in typescript

angularjs, angularjs-controller, inheritance, javascript, typescript

Solution

You need to ensure that `ParentCtrl` is defined before `ChildCtrl`. You can do that by properly ordering your script tags or your reference file or your requirejs config depending upon what method you are using.

Alternatively put them in the same file:

module Controllers.SolMan
{
    export class ParentCtrl
    {
        constructor(
            seUIConfigsCacheService: Services.CrossCutting.UIConfigsCacheService,
            seHttpService: Services.CrossCutting.HttpService,
            $scope: Interfaces.IParentScope,
            genericServices: Services.CrossCutting.GenericService,
            $compile)
        {
            console.log('parent');
        }
     }
}
module Controllers.SolMan {

    export class ChildCtrl extends ParentCtrl {
        constructor(
            seUIQueryConfigsCacheService: Services.CrossCutting.UIConfigsCacheService,
            seHttpService: Services.CrossCutting.HttpService,
            $scope: Interfaces.IChildScope,
            genericServices: Services.CrossCutting.GenericService,
            $compile,
            $injector) {
                super(seUIConfigsCacheService, seHttpService, $scope, genericServices, $compile);
                console.log('Child');
        }
    }
}

There is more about TypeScript modules here

Problem

I am trying to inherit an angularjs controller using Typescript's extends. But as soon as I extend the controller angularjs throws this error: Error: Argument 'GenericLookupCtrl' is not a function, got undefined Here is my simplified code of parent and child classes: Parent first: ``` module Controllers.SolMan { export class ParentCtrl { constructor( seUIConfigsCacheService: Services.CrossCutting.UIConfigsCacheService, seHttpService: Services.CrossCutting.HttpService, $scope: Interfaces.IParentScope, genericServices: Services.CrossCutting.GenericService, $compile) { console.log('parent'); } } } ``` Child: ``` module Controllers.SolMan { export class ChildCtrl extends ParentCtrl { constructor( seUIQueryConfigsCacheService: Services.CrossCutting.UIConfigsCacheService, seHttpService: Services.CrossCutting.HttpService, $scope: Interfaces.IChildScope, genericServices: Services.CrossCutting.GenericService, $compile, $injector) { super(seUIConfigsCacheService, seHttpService, $scope, genericServices, $compile); console.log('Child'); } } } ``` Here is how the controllers are registered: ``` .controller('ParentCtrl', Controllers.ParentCtrl) .controller('ChildCtrl', Controllers.ChildCtrl) ``` I can use plain angularjs inheritance of controllers but to call parent methods from child I have to extend the child because otherwise typescript gives error that it cannot find the method in parent.

Original source