How to properly annotate an abstract base component with life cycle hooks in Angular





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}







1















I have an abstract base component with life cycle hooks:



export abstract class BaseComponent implements OnChanges, OnInit {

ngOnChanges(changes: SimpleChanges): void {

}

ngOnInit() {

}
}


And a child component:



@Component({

})
export class ChildComponent extends BaseComponent {


This will result in Can't resolve all parameters for BaseComponent: (?, ?, ?).



The parameter indeed has three parameters. All three values are listed in the providers section of the module containing the child component. Adding the base component to the module is not possible since it is not compatible with the type required for declarations.



If I add @Injectable() to the BaseComponent tslint will complain that In the class "BaseComponent" which have the "@Injectable" decorator, the "ngOnChanges()" hook method is not allowed. Please, drop it. (contextual-life-cycle). Everything works fine though.



Adding @Component() to the BaseComponent results in Webstorm complaning about Component 'BaseComponent' is not included in a module and will not be available inside a template. Consider adding it to a NgModule declaration. Again, code runs fine.



Since I like to keep my code clear of any warnings: What is the correct way to implement this pattern?










share|improve this question




















  • 3





    Can't resolve all parameters for BaseComponent: (?, ?, ?) looks like an error related to the constructor. Can you update your question to show the constructors for the classes.

    – cgTag
    Nov 24 '18 at 0:29











  • Updated to included info about the constructor.

    – Georg M. Sorst
    Nov 26 '18 at 21:55


















1















I have an abstract base component with life cycle hooks:



export abstract class BaseComponent implements OnChanges, OnInit {

ngOnChanges(changes: SimpleChanges): void {

}

ngOnInit() {

}
}


And a child component:



@Component({

})
export class ChildComponent extends BaseComponent {


This will result in Can't resolve all parameters for BaseComponent: (?, ?, ?).



The parameter indeed has three parameters. All three values are listed in the providers section of the module containing the child component. Adding the base component to the module is not possible since it is not compatible with the type required for declarations.



If I add @Injectable() to the BaseComponent tslint will complain that In the class "BaseComponent" which have the "@Injectable" decorator, the "ngOnChanges()" hook method is not allowed. Please, drop it. (contextual-life-cycle). Everything works fine though.



Adding @Component() to the BaseComponent results in Webstorm complaning about Component 'BaseComponent' is not included in a module and will not be available inside a template. Consider adding it to a NgModule declaration. Again, code runs fine.



Since I like to keep my code clear of any warnings: What is the correct way to implement this pattern?










share|improve this question




















  • 3





    Can't resolve all parameters for BaseComponent: (?, ?, ?) looks like an error related to the constructor. Can you update your question to show the constructors for the classes.

    – cgTag
    Nov 24 '18 at 0:29











  • Updated to included info about the constructor.

    – Georg M. Sorst
    Nov 26 '18 at 21:55














1












1








1








I have an abstract base component with life cycle hooks:



export abstract class BaseComponent implements OnChanges, OnInit {

ngOnChanges(changes: SimpleChanges): void {

}

ngOnInit() {

}
}


And a child component:



@Component({

})
export class ChildComponent extends BaseComponent {


This will result in Can't resolve all parameters for BaseComponent: (?, ?, ?).



The parameter indeed has three parameters. All three values are listed in the providers section of the module containing the child component. Adding the base component to the module is not possible since it is not compatible with the type required for declarations.



If I add @Injectable() to the BaseComponent tslint will complain that In the class "BaseComponent" which have the "@Injectable" decorator, the "ngOnChanges()" hook method is not allowed. Please, drop it. (contextual-life-cycle). Everything works fine though.



Adding @Component() to the BaseComponent results in Webstorm complaning about Component 'BaseComponent' is not included in a module and will not be available inside a template. Consider adding it to a NgModule declaration. Again, code runs fine.



Since I like to keep my code clear of any warnings: What is the correct way to implement this pattern?










share|improve this question
















I have an abstract base component with life cycle hooks:



export abstract class BaseComponent implements OnChanges, OnInit {

ngOnChanges(changes: SimpleChanges): void {

}

ngOnInit() {

}
}


And a child component:



@Component({

})
export class ChildComponent extends BaseComponent {


This will result in Can't resolve all parameters for BaseComponent: (?, ?, ?).



The parameter indeed has three parameters. All three values are listed in the providers section of the module containing the child component. Adding the base component to the module is not possible since it is not compatible with the type required for declarations.



If I add @Injectable() to the BaseComponent tslint will complain that In the class "BaseComponent" which have the "@Injectable" decorator, the "ngOnChanges()" hook method is not allowed. Please, drop it. (contextual-life-cycle). Everything works fine though.



Adding @Component() to the BaseComponent results in Webstorm complaning about Component 'BaseComponent' is not included in a module and will not be available inside a template. Consider adding it to a NgModule declaration. Again, code runs fine.



Since I like to keep my code clear of any warnings: What is the correct way to implement this pattern?







angular






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 26 '18 at 21:55







Georg M. Sorst

















asked Nov 24 '18 at 0:22









Georg M. SorstGeorg M. Sorst

117112




117112








  • 3





    Can't resolve all parameters for BaseComponent: (?, ?, ?) looks like an error related to the constructor. Can you update your question to show the constructors for the classes.

    – cgTag
    Nov 24 '18 at 0:29











  • Updated to included info about the constructor.

    – Georg M. Sorst
    Nov 26 '18 at 21:55














  • 3





    Can't resolve all parameters for BaseComponent: (?, ?, ?) looks like an error related to the constructor. Can you update your question to show the constructors for the classes.

    – cgTag
    Nov 24 '18 at 0:29











  • Updated to included info about the constructor.

    – Georg M. Sorst
    Nov 26 '18 at 21:55








3




3





Can't resolve all parameters for BaseComponent: (?, ?, ?) looks like an error related to the constructor. Can you update your question to show the constructors for the classes.

– cgTag
Nov 24 '18 at 0:29





Can't resolve all parameters for BaseComponent: (?, ?, ?) looks like an error related to the constructor. Can you update your question to show the constructors for the classes.

– cgTag
Nov 24 '18 at 0:29













Updated to included info about the constructor.

– Georg M. Sorst
Nov 26 '18 at 21:55





Updated to included info about the constructor.

– Georg M. Sorst
Nov 26 '18 at 21:55












1 Answer
1






active

oldest

votes


















1














Not annotating the base component at all (neither @Injectable nor @Component) did the trick for me.






share|improve this answer
























    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53454161%2fhow-to-properly-annotate-an-abstract-base-component-with-life-cycle-hooks-in-ang%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    1














    Not annotating the base component at all (neither @Injectable nor @Component) did the trick for me.






    share|improve this answer




























      1














      Not annotating the base component at all (neither @Injectable nor @Component) did the trick for me.






      share|improve this answer


























        1












        1








        1







        Not annotating the base component at all (neither @Injectable nor @Component) did the trick for me.






        share|improve this answer













        Not annotating the base component at all (neither @Injectable nor @Component) did the trick for me.







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Feb 3 at 13:14









        Georg M. SorstGeorg M. Sorst

        117112




        117112
































            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53454161%2fhow-to-properly-annotate-an-abstract-base-component-with-life-cycle-hooks-in-ang%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            這個網誌中的熱門文章

            Xamarin.form Move up view when keyboard appear

            Post-Redirect-Get with Spring WebFlux and Thymeleaf

            Anylogic : not able to use stopDelay()