Angular 1.5 component - template not rendered after converting from directive

Question

I have an Angular directive (myUser) which is working. It's defined in an AngularJS 1.5 project, using TypeScript like this (I'm assigning the controller directly inside the directive) . The directive (myUser) is being linked to it's parent module (you can see this at the bottom of the code sample below - you need to scroll)

class myUser {

    controller: any;
    templateUrl: string;
    controllerAs: string;

    constructor() {
        this.controller = myCtrl;
        this.controllerAs = 'ctrl';
        this.templateUrl    = '/mytemplate.html';
    }
    static userFactory() {
        var instance = new myUser();
        return instance;
    }
}


class myCtrl {

    global: any;
    mySrv: any;
    username: any;
    focus: boolean;

    static $inject = ['MyDependency', 'MyService'];

    constructor(UserInfo, mySrv) {
        this.global     = UserInfo;
        this.mySrv    = mySrv;
        this.myData   = this.global ? this.global.myData : false;
        this.focus      = false;
    }

    check() {
        if(this.myData){
            return true;
        };
        return false;
    }

    signIn(model) {
        this.mySrv.signIn(model);
    }

    signOut() {
        this.mySrv.signOut();
    }
}

class myOtherDir {
     ... other directive definition
}

class myOtherCtrl {
     ... other controller definition
}

angular
    .module('shared.myNavigation', [])
    .directive('myUser', myUser.userFactory)
    .directive('myOtherDir', myOtherDir.dirFactory)
    .controller('myOtherCtrl', myOtherCtrl)

When I run the app, the directive is replaced by the content of /mytemplate.html:

html ... <my-user></my-user> => is replaced by template markup

When I change the directive to a component though, using the Angular 1.5 component API like this, the component declaration in my HTML is no longer replaced by the template markup:

angular
    .module('shared.myNavigation', [])
    .component('myUser', myUser.userFactory)
    .directive('myOtherDir', myOtherDir.dirFactory)

There are no errors, and the only thing that's changed is that I'm now linking this to the module as a component instead of a directive. I've gone through my code and I believe it should be fully compatible with the component API. Is there something obvious I'm missing? I've Googled just about every similar issue I can find, and I'm not sure where I'm going wrong.

Answer 1

Sorry for resurrecting this but I just came up with this exact problem on my project and solved without classes.

It seems the component registration functions takes a function expression and not a function reference as in the directive registration. So in the source provided with the question just adding parenthesis to registration will execute and register the component.

I just did a directive to component conversion (no classes just regular javascript) and it was fixed.

angular
.module('shared.myNavigation', [])
.component('myUser', myUser.userFactory()) /*Converting to expression*/
.directive('myOtherDir', myOtherDir.dirFactory)

Answer 2

I'm not completely sure why, but instead of calling the static userFactory function to create a class instance, I needed to directly create the instance when hooking up the component, like this:

angular
    .module('shared.myNavigation', [])
    .component('myUser', new myUser())

Bonus points if anyone can explain why this is required.