Angular Component Extension with ng-packagr

Angular Component Extension with ng-packagr

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

• 

  dylan.keegan

  • Post Options:
  • Link
    Copy

  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?

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  dylan.keegan

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 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