Cannot extend angularjs controller in typescript

Question

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.

basarat · Accepted Answer · 2013-12-06 12:07:04Z

6

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

answered Dec 6, 2013 at 12:07

basarat

278k60 gold badges475 silver badges528 bronze badges

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

3 Comments

Haris Over a year ago

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.

rodrigogq Over a year ago

@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!

basarat Over a year ago

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

Collectives™ on Stack Overflow

Cannot extend angularjs controller in typescript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related