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.

Chris Halcrow · Accepted Answer · 2018-02-01 05:32:06Z

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.

answered Feb 1, 2018 at 5:32

Chris Halcrow

32.5k19 gold badges202 silver badges235 bronze badges

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

3 Comments

skyboyer Over a year ago

oh, man. You saved my day. Just run into the same issue while trying to replace directive with component.

skyboyer Over a year ago

have just found out it's mentioned in Guide@AngularJS Docs as tiny comment but without any kind of motivation/explanation.

Chris Halcrow Over a year ago

Thanks @skyboyer, I'm doing an upgrade from AngularJS to Angular and I've found that upgrading to components is near useless anyway as part of a migration path, since the Angular architecture is still significantly different. My current approach is to completely re-write my AngularJS as Angular components as it makes the upgrade more straightforward.

jaderanderson · Accepted Answer · 2020-11-17 12:00:05Z

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)

answered Nov 17, 2020 at 12:00

jaderanderson

4355 silver badges12 bronze badges

Collectives™ on Stack Overflow

Angular 1.5 component - template not rendered after converting from directive

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related