Angular AOT runtime error using wjFlexGridCellTemplate w extended WjFlexGridCol

Posted by: dylan.keegan on 11 February 2021, 4:30 am EST

    • Post Options:
    • Link

    Posted 11 February 2021, 4:30 am EST

    We are getting runtime errors in angular when built with AOT enabled. The issue is caused when we are using wjFlexGridCellTemplate inside an object extending WjFlexGridColumn.

    The runtime error occurs in WjFlexGridCellTemplate._attachToControl() where ownerControl is undefined.

    I tracked the problem to the usage of instanceof in the WjFlexGridCellTemplate constructor. There seems to be multiple versions of the WjFlexGridColumn prototype depending on if you are using AOT or JIT.

    
      function WjFlexGridCellTemplate(e, t, r, o, i, n) {
        this.viewContainerRef = e;
        this.templateRef = t;
        this.elRef = r;
        this.cdRef = n;
        this.autoSizeRows = !0;
        this.forceFullEdit = !0;
        console.log('WjFlexGridCellTemplate o ', o);
        if (o instanceof WjFlexGrid) {
          this.grid = o;
          console.log('WjFlexGridCellTemplate o instanceof WjFlexGrid', this);
        }
        else if (o instanceof WjFlexGridColumn) {
          this.column = o;
          this.grid = wijmo_angular2_directivebase_1.WjDirectiveBehavior.getBehavior(
            o
          ).parentBehavior.directive;
          console.log('WjFlexGridCellTemplate o instanceof WjFlexGridColumn', this);
        }
      }
    
    

    Example extended component

    import { Component, forwardRef } from '@angular/core';
    import { WjFlexGridColumn, wjFlexGridColumnMeta } from '@grapecity/wijmo.angular2.grid';
    
    
    @Component({
      selector: 'hc-test-grid-column',
      template: `<div><ng-content></ng-content></div>`,
      // tslint:disable-next-line:use-input-property-decorator
      inputs: wjFlexGridColumnMeta.inputs,
      // tslint:disable-next-line:use-output-property-decorator
      outputs: wjFlexGridColumnMeta.outputs,
      providers: [
        { provide: 'WjComponent', useExisting: forwardRef(() => TestColumnComponent) },
        ...wjFlexGridColumnMeta.providers,
      ],
    })
    export class TestColumnComponent extends WjFlexGridColumn { }
    
    

    Usage

    
        <wj-flex-grid [itemsSource]="itemsSource">
          <hc-test-grid-column width="*" header="grid-column.header">
            <ng-template wjFlexGridCellTemplate cellType="Cell" let-cell="cell">
              wjFlexGridCellTemplate {{ cell.item.val }}
            </ng-template>
          </hc-test-grid-column>
        </wj-flex-grid>
    
    

    I can eliminate the error in AOT if I change the import in TestColumnComponent to the following:

    import { WjFlexGridColumn, wjFlexGridColumnMeta } from ‘@grapecity/wijmo.angular2.grid/index’;

    This causes an error in JIT compilation instead. I should be able to use the same version in both JIT and AOT builds. (We use JIT for local dev, AOT for prod).

  • Posted 11 February 2021, 4:31 am EST

    Angular v 8.2.14

    Wijmo.angular2.all v 5.20203.766

  • Posted 11 February 2021, 4:36 am EST

    Also note that this worked without any issues with wijmo v 5.20191.615

    We are updating the wijmo version in preparation for an Angular version upgrade.

  • Posted 11 February 2021, 5:09 am EST

    wijmo-cell-templ-demo.zip

    I’ve attached a demo project here. You can use the “start-aot” package.json script to demo the issue in aot mode.

  • Posted 14 February 2021, 4:17 pm EST

    Hi,

    We are working on this case and will provide you an update soon.

    Regards

  • Posted 15 February 2021, 11:47 pm EST

    Hi,

    Thank you for sharing the sample. We are able to observe the issue at our end too and hence we have escalated to the concerned team for further investigation of the issue. The internal tracking id for the issue is #472801. I’ll inform you once I get more information regarding the same.

    Regards

    Sharad

  • Posted 16 February 2021, 12:01 am EST

    This issue is caused by the angular AOT compiler. Disabling the esm modules should fix the issue. Please refer to the following doc for more information:

    https://www.grapecity.com/wijmo/docs/GettingStarted/Angular-Components#disabling-es-modules-in-angular-8-and-lower

  • Posted 16 February 2021, 9:55 am EST

    Thank you Sharad. That information is very helpful.

Need extra support?

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

Learn More

Forum Channels