#Pebula/NGrid not compatible with Angular v19

14 messages · Page 1 of 1 (latest)

vapid lily
#

I have migrated (using a branch) from v18 to v19 and everything is working well (besides a major workaround #1334206979358457917 for angular/fire/compat) except the @pebula/ngrid library, which seems to throw an NG0203 error (Injector must be inside a constructor, etc).

However, after inspecting the error trace, I noticed the error is being raised by angular/cdk

ERROR RuntimeError: NG0203
    at injectInjectorOnly (core.mjs:1112:15)
    at ɵɵinject (core.mjs:1125:60)
    at inject (core.mjs:1211:12)
    at <instance_members_initializer> (table.mjs:77:20)
    at new CdkColumnDef (table.mjs:130:16)
    at new PblNgridColumnDef (pebula-ngrid.mjs:1052:9)
    at PblNgridColumnRowComponent.cellCreated (pebula-ngrid.mjs:3210:13)
    at PblNgridColumnRowComponent._createCell (pebula-ngrid.mjs:2839:22)
    at PblNgridColumnRowComponent.ngAfterViewInit (pebula-ngrid.mjs:2796:18)
    at callHookInternal (core.mjs:4277:14)

The new CdkColumnDef points to @angular/cdk/fesm2022/table.mjs file. Any ideas of how to force a fix? Thanks!

image.png
#

The original stack trace started at pebula/ngrid, which uses CdkColumnDef for its own API.

image.png
plain forge
#

"Forcing a fix" will be very hacky here, because the library is totally misusing a directive here: https://github.com/shlomiassaf/ngrid/blob/e32895a0c2d0fb0c8894fc777af3d41e30aec82a/libs/ngrid/src/lib/grid/row/columns-row.component.ts#L93-L94
They are just directly instantiating it, instead of using it in the template, like you are supposed to. As such, the constructor doesn't run in an injection context.

If you really want, you could either extend the class to run that code in an injection context (not guaranteed to even do something useful, because I don't really know why they are doing this stuff) or you could apply a patch to the library directly via something like patch-package.

vapid lily
#

Nice catch!

plain forge
#

Seems like the library is abandoned, so it might be time to migrate away from it or fork it 😄

vapid lily
#

But how would a fix work? Not sure if I understood the part about They are just directly instantiating it, instead of using it in the template, like you are supposed to

plain forge
#

Like when you write a directive, you have

@Directive({
  selector: "appFoo"
})
class FooDirective  { }

The way you use it is <div [appFoo]> or similar. You never call new FooDirective(). But that library is doing that.

#

I don't know why they are doing that, it seems nonsensical.

vapid lily
#

Ah... so it should be injectable, not directly called, gotcha

#

Like:

export class PblNgridColumnDef<T extends COLUMN = COLUMN> extends CdkColumnDef implements OnDestroy {
  // etc

  private columDefDirective = inject(PblNgridColumnDef);
}
plain forge
#

That would only work if the directive is actually present on the element. Not sure if it is.

#

I don't know what this library is doing, sorry

vapid lily