Angular-gridster2: ng build -prod produces errors when Typescript's strictNullChecks are enabled

[BobAvatar]

When setting strictNullChecksto true in tsconfig.app.json of an angular-cli-generated project and trying to run ng build -prod, then the following errors are produced:

ERROR in .../src/$$_gendir/node_modules/angular-gridster2/dist/gridsterItem.component.ngfactory.ts (305,33): Object is possibly 'undefined'.
ERROR in ng:///.../node_modules/angular-gridster2/dist/gridsterItem.component.d.ts.GridsterItemComponent.html (2,27): Object is possibly 'undefined'.
ERROR in ng:///.../node_modules/angular-gridster2/dist/gridsterItem.component.d.ts.GridsterItemComponent.html (2,252): Object is possibly 'undefined'.
ERROR in ng:///.../node_modules/angular-gridster2/dist/gridsterItem.component.d.ts.GridsterItemComponent.html (2,477): Object is possibly 'undefined'.
ERROR in ng:///.../node_modules/angular-gridster2/dist/gridsterItem.component.d.ts.GridsterItemComponent.html (2,702): Object is possibly 'undefined'.
ERROR in ng:///.../node_modules/angular-gridster2/dist/gridsterItem.component.d.ts.GridsterItemComponent.html (2,927): Object is possibly 'undefined'.
ERROR in ng:///.../node_modules/angular-gridster2/dist/gridsterItem.component.d.ts.GridsterItemComponent.html (2,1154): Object is possibly 'undefined'.
ERROR in ng:///.../node_modules/angular-gridster2/dist/gridsterItem.component.d.ts.GridsterItemComponent.html (2,1381): Object is possibly 'undefined'.

The alternative ng build runs just fine. From the errors it looks like it has something to do with AOT-compilation.

[tiberiuzuld]

Hi @BobAvatar ,
Will try to have it fixed today.
Thanks

[tiberiuzuld]

Hi @BobAvatar ,
The issue is related to #9235 , #17727 and #13778.

I don't know if I can fix this easily and keep the options interfaces easily.
Will see what I can do this week without modifying the interfaces to users.

Thanks

[BobAvatar]

Haven't checked where the actual problem originates, but if it is in one of your interfaces like

export interface GridsterItem {
  x?: number;
  y?: number;
  rows?: number;
  cols?: number;
  initCallback?: Function;
  dragEnabled?: boolean;
  resizeEnabled?: boolean;
  maxItemRows?: number;
  minItemRows?: number;
  maxItemCols?: number;
  minItemCols?: number;
  minItemArea?: number;
  maxItemArea?: number;
  [propName: string]: any;
}

you could check, if
[propName: string]: any | undefined;
helps.

Otherwise, great library!

[tiberiuzuld]

Hi @BobAvatar ,
The issue is that the options for GridsterItem and Gridster are optional.
So an option can be for example: number | undefined.
strictNullChecks is checking that your option is undefined.
In the library I do some kind of merge from default options and the options provided by the user.
But seems that typescript doesn't detect that as a guard against undefined.
So that's why we get those errors.

Will try to find a way to fix the issue this week.

Thanks,

[tiberiuzuld]

Hi @BobAvatar ,
Workaround: add in your tsconfig.json the option "skipLibCheck": true.
This will skip checking the libraries.
Enabled strictNullChecks in the libray and I get errors from angular itself also. Issue #17863

ERROR in F:/projects/gridster2/node_modules/@angular/core/src/change_detection/differs/default_iterable_differ.d.ts (10,22):  
Class 'DefaultIterableDiffer<V>' incorrectly implements interface 'IterableChanges<V>'

I am still investigating how to make the library compatible.

Thanks

[tiberiuzuld]

Hi @BobAvatar ,
Added support for strictNullChecks in v3.11.3

Let me know if it works for you.

Thanks

[BobAvatar]

Hi, works perfectly!
Thanks a lot.

PS: Did "skipLibCheck": true really fix the issue at some point? Because that's something I had tried as well, without any success.

[tiberiuzuld]

Hi @BobAvatar ,

Good to know that it works 👍
The option skipLibCheck works for me, to ignore angular issue.
Didn't test it on this library tho.

Thanks