Stack Exchange
Cannot extend angularjs controller in typescript
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.

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

thanks! adding them in same file removed the error. But I would like them to be in separate files. Ok I understand now, you are referring to how the js files are included in my code and yes child is referenced before the parent.

@Haris I know this is kind of old, hut I have recently faced the same issue - and yes, the base class was included before in the reference file. I figured out that the real issue is how files are parsed in typescript. You need to edit your solution file in notepad and guarantee that your parent .ts file (base class) is inserted before the child. The first .ts files are generated on the top of the resulted main.js file. Then it works! Cheers!

@rodrigogq I highly recommend you use a reference file to sort your files https://github.com/TypeStrong/grunt-ts#javascript-generation Or use external modules to bypass the problem entirely https://www.youtube.com/watch?v=KDrWLMUY0R0&hd=1
