Angular AOT runtime error using wjFlexGridCellTemplate w extended WjFlexGridCol

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

  • 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(
    console.log('WjFlexGridCellTemplate o instanceof WjFlexGridColumn', this);

    Example extended component
    import { Component, forwardRef } from '@angular/core';
    import { WjFlexGridColumn, wjFlexGridColumnMeta } from '@grapecity/wijmo.angular2.grid';

    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) },
    export class TestColumnComponent extends WjFlexGridColumn { }


    <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 }}

    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).
  • Replied 11 February 2021, 4:31 am EST

    Angular v 8.2.14
    Wijmo.angular2.all v 5.20203.766
  • Replied 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.
  • Replied 11 February 2021, 5:09 am EST

    I've attached a demo project here. You can use the "start-aot" package.json script to demo the issue in aot mode.
  • Replied 14 February 2021, 4:17 pm EST


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

  • Replied 15 February 2021, 11:47 pm EST


    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.

  • Marked as Answer

    Replied 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:
  • Replied 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