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,
            $pile)
        {
            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,
            $pile,
            $injector) {
                super(seUIConfigsCacheService, seHttpService, $scope, genericServices, $pile);
                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.

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,
            $pile)
        {
            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,
            $pile,
            $injector) {
                super(seUIConfigsCacheService, seHttpService, $scope, genericServices, $pile);
                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.

• javascript
• angularjs
• inheritance
• typescript
• angularjs-controller

1 Answer 1

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,
            $pile)
        {
            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,
            $pile,
            $injector) {
                super(seUIConfigsCacheService, seHttpService, $scope, genericServices, $pile);
                console.log('Child');
        }
    }
} 

There is more about TypeScript modules here