PblNgridDragModule is not compatible with ViewEngine or AOT in general

[ronnetzer]

What is the expected behavior?

In version 2 it was possible to use PblNgridDragModule in a publishable library.

What is the current behavior?

Using PblNgridDragModule in a publishable library breaks the library's build which is being done (angular 11) with enableIvy: false. it produces the following error

✖ Compiling TypeScript sources through NGC
ERROR: RangeError: Maximum call stack size exceeded
Unexpected value 'PblNgridDragModule in /Users/ronnetzer/Projects/paypo/node_modules/@pebula/ngrid/drag/pebula-ngrid-drag.d.ts' imported by the module 'CommonTableTemplatesModule in /Users/ronnetzer/Projects/paypo/libs/ui/src/lib/table/common-table-templates/common-table-templates.module.ts'. Please add a @NgModule annotation.
Unexpected value 'PblNgridDragModule in /Users/ronnetzer/Projects/paypo/node_modules/@pebula/ngrid/drag/pebula-ngrid-drag.d.ts' imported by the module 'TableModule in /Users/ronnetzer/Projects/paypo/libs/ui/src/lib/table/table.module.ts'. Please add a @NgModule annotation.
Can't export value PblNgridDragModule in /Users/ronnetzer/Projects/paypo/node_modules/@pebula/ngrid/drag/pebula-ngrid-drag.d.ts from TableModule in /Users/ronnetzer/Projects/paypo/libs/ui/src/lib/table/table.module.ts as it was neither declared nor imported!
RangeError: Maximum call stack size exceeded
RangeError: Maximum call stack size exceeded
RangeError: Maximum call stack size exceeded
RangeError: Maximum call stack size exceeded
RangeError: Maximum call stack size exceeded
RangeError: Maximum call stack size exceeded
RangeError: Maximum call stack size exceeded
Cannot determine the module for class PblDragHandle in /Users/ronnetzer/Projects/paypo/node_modules/@pebula/ngrid/drag/pebula-ngrid-drag.d.ts! Add PblDragHandle to the NgModule to fix it.
Cannot determine the module for class PblNgridDragResizeComponent in /Users/ronnetzer/Projects/paypo/node_modules/@pebula/ngrid/drag/pebula-ngrid-drag.d.ts! Add PblNgridDragResizeComponent to the NgModule to fix it.
Cannot determine the module for class ɵg in /Users/ronnetzer/Projects/paypo/node_modules/@pebula/ngrid/drag/pebula-ngrid-drag.d.ts! Add ɵg to the NgModule to fix it.
Cannot determine the module for class ɵh in /Users/ronnetzer/Projects/paypo/node_modules/@pebula/ngrid/drag/pebula-ngrid-drag.d.ts! Add ɵh to the NgModule to fix it.
Cannot determine the module for class ɵj in /Users/ronnetzer/Projects/paypo/node_modules/@pebula/ngrid/drag/pebula-ngrid-drag.d.ts! Add ɵj to the NgModule to fix it.

What are the steps to reproduce?

1. create a library with a module that imports PblNgridDragModule.
2. try to build the library with -c=production flag.

Which versions of Angular, CDK, Material, NGrid, OS, TypeScript, browsers are affected?

ngrid: 3.x
angular,cdk,material: 11.x
typescript: 4.0.x

Is there anything else we should know?

[ronnetzer]

can be reproduced in you starter template by running yarn start:ve without changing anything and it will throw the same error

[ronnetzer]

@shlomiassaf any news? this is a serious blocker and I have no clue how to fix it

[shlomiassaf]

@ronnetzer I'm not sure I understand.

The build tool is from angular and I assume it's a mess due to all of the VE to/from IVY convertions.

In general, the drag module is a compiled module which makes use of other ngrid compiled modules which I built with no issues.

Or another example, @pebula/ngrid-material is a standalone package, compiled with ng-packger using @pebula/ngrid and other ngrid libraries as dependencies. Here, as well, compilation goes ok.

---

EDIT

I think @pebula/ngrid-material is not using @pebula/ngrid/drag directly which might be a clue.

I'll throw things and let's think...

1. In general, there might be a difference when building with dependencies that are local.
   I.E Building @pebula/ngrid-material when @pebula/ngrid is local (but not included in @pebula/ngrid-material)
   And building from node_modules dependencies, which make use of NGCC artifacts, metadata outputs etc...

2. @pebula/ngrid/drag is using component inheritance, to inherit some CDK components.
   It was not supported in angular before v11 but now it is so I ported to it.
   Maybe the inheritance is not yet supported by the ng-packger tool from angular since it's still using VE to build.
   I assume once they provide the new IVY package builder it will be sorted out.

I believe that it's probably (2) mixed with (1), looks like it fits

About fixing it, it will be costly, I need to port back the DRAG module to use inheritance via composition and not by extending a class.
The code in the V2 branch does that, but it got changed since then so it's work.
In general it means replicating the structure and calling methods through the prototype of the base class from the CDK.

Since 12 is around the corner, can you hold with that and see maybe they fixed the whole thing?

[ronnetzer]

@shlomiassaf Thanks for the feedback. Sounds like v12 is the way to go forward.

I'll revisit this issue when v4 is ready