Angular Component Extension with ng-packagr

Posted by: dylan.keegan on 5 October 2020, 2:36 am EST

  • Posted 5 October 2020, 2:36 am EST

    We have a number of wijmo angular components that we are extending in the same manner that is shown by Ashwin in the following forum thread.
    https://www.grapecity.com/forums/wijmo/customgrid-extending-from-
    These component live in a component library that we package with ng-packagr. This works up until version 9, where we get errors from ng-packagr signifying missing imports. It seems that ng-packagr is not carrying inputs from the parent component to the child component when extending the same way that a regular angular build does.

    Do you have any solutions or workarounds for this situation?
  • Replied 6 October 2020, 4:21 pm EST

    Hi Dylan,

    We are working on your issue and will update you as soon as possible.

    Regards,
    Ashwin
  • Replied 6 October 2020, 9:24 pm EST

    Hi Dylan,

    We are sorry but we were not able to properly create a library using ng-packagr. Can you please update the sample which I provided in the previous case so that it replicates your issue?

    ~regards
  • Replied 6 November 2020, 8:44 am EST

    Hi Ashwin,

    I am sorry for the delay. I have attached a modified version of the sample which you provided that is set up to perform a library build.

    The library build can be triggered via `npm run-script build-lib`.
    You should get the following error.

    ERROR: Can't bind to 'itemsSource' since it isn't a known property of 'app-custom-grid'.
    1. If 'app-custom-grid' is an Angular component and it has 'itemsSource' input, then verify that it is part of this module.
    2. If 'app-custom-grid' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
    3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<app-custom-grid [ERROR ->][itemsSource]="source"></app-custom-grid>")


    The error disappears if you remove the itemSource input in the app.component template.

    wijmo-flexgrid-extension-ngpackagr.zip
  • Replied 8 November 2020, 11:29 pm EST

    Hi Dylan,

    Thank you for the sample. I was able to replicate the issue and have forwarded this to the developers with internal tracking id 468123. I will update you once I will hear from them.

    ~regards
  • Replied 17 November 2020, 8:02 pm EST

    Hi Dylan,

    Sorry for the delayed response.

    Ng-packagr cannot discover parent component inputs that are declared in the parent component decorator. It's a bug or limitation of ng-packagr and the issue is not exclusively related to wijmo.
    A workaround is to explicitly provide all the enumeration of used attributes in child component decorator. Namely, "inputs: ['itemsSource']" string should be added in decorator for CustomGridComponent.

    ~regards
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels