Angular 11 + [email protected] + Build errors

[sapnildessai]

Hi @ghiscoding ,

I have installed latest version of angular-slickgrid in angular 11 project. After ng build i have started getting these errors in d.ts files. Could you please help me with the same? Below are the logs from build

ng build
✔ Browser application bundle generation complete.

Error: node_modules/angular-slickgrid/app/modules/angular-slickgrid/services/graphql.service.d.ts:18:5 - error TS2416: Property 'init' in type 'GraphqlService' is not assignable to the same property in base type 'BackendService'.
Type '(serviceOptions?: GraphqlServiceOption | undefined, pagination?: Pagination | undefined, grid?: any) => void' is not assignable to type '(serviceOptions?: BackendServiceOption | undefined, pagination?: Pagination | undefined, grid?: any) => void'.
Types of parameters 'serviceOptions' and 'serviceOptions' are incompatible.
Type 'BackendServiceOption | undefined' is not assignable to type 'GraphqlServiceOption | undefined'.
Property 'datasetName' is missing in type 'BackendServiceOption' but required in type 'GraphqlServiceOption'.

18 init(serviceOptions?: GraphqlServiceOption, pagination?: Pagination, grid?: any): void;
~~~~

node_modules/angular-slickgrid/app/modules/angular-slickgrid/models/graphqlServiceOption.interface.d.ts:14:5
14 datasetName: string;
~~~~~~~~~~~
'datasetName' is declared here.
node_modules/angular-slickgrid/app/modules/angular-slickgrid/services/graphql.service.d.ts:54:5 - error TS2416: Property 'processOnPaginationChanged' in type 'GraphqlService' is not assignable to the same property in base type 'BackendService'.
Type '(event: Event, args: PaginationChangedArgs) => string' is not assignable to type '(event: Event | undefined, args: PaginationChangedArgs) => string'.
Types of parameters 'event' and 'event' are incompatible.
Type 'Event | undefined' is not assignable to type 'Event'.
Type 'undefined' is not assignable to type 'Event'.

54 processOnPaginationChanged(event: Event, args: PaginationChangedArgs): string;
~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/angular-slickgrid/app/modules/angular-slickgrid/services/grid-odata.service.d.ts:21:5 - error TS2416: Property 'init' in type 'GridOdataService' is not assignable to the same property in base type 'BackendService'.
Type '(serviceOptions: Partial, pagination?: Pagination | undefined, grid?: any) => void' is not assignable to type '(serviceOptions?: BackendServiceOption | undefined, pagination?: Pagination | undefined, grid?: any) => void'.
Types of parameters 'serviceOptions' and 'serviceOptions' are incompatible.
Type 'BackendServiceOption | undefined' is not assignable to type 'Partial'.
Type 'undefined' is not assignable to type 'Partial'.

21 init(serviceOptions: Partial, pagination?: Pagination, grid?: any): void;
~~~~
node_modules/angular-slickgrid/app/modules/angular-slickgrid/services/grid-odata.service.d.ts:42:5 - error TS2416: Property 'processOnPaginationChanged' in type 'GridOdataService' is not assignable to the same property in base type 'BackendService'.
Type '(event: Event, args: PaginationChangedArgs) => string' is not assignable to type '(event: Event | undefined, args: PaginationChangedArgs) => string'.
Types of parameters 'event' and 'event' are incompatible.
Type 'Event | undefined' is not assignable to type 'Event'.
Type 'undefined' is not assignable to type 'Event'.

42 processOnPaginationChanged(event: Event, args: PaginationChangedArgs): string;
~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/angular-slickgrid/app/modules/angular-slickgrid/models/graphqlServiceApi.interface.d.ts:7:18 - error TS2430: Interface 'GraphqlServiceApi' incorrectly extends interface 'BackendServiceApi'.
The types of 'service.init' are incompatible between these types.
Type '(serviceOptions?: GraphqlServiceOption | undefined, pagination?: Pagination | undefined, grid?: any) => void' is not assignable to type '(serviceOptions?: BackendServiceOption | undefined, pagination?: Pagination | undefined, grid?: any) => void'.

7 export interface GraphqlServiceApi extends BackendServiceApi {
~~~~~~~~~~~~~~~~~
node_modules/angular-slickgrid/app/modules/angular-slickgrid/models/odataServiceApi.interface.d.ts:4:18 - error TS2430: Interface 'OdataServiceApi' incorrectly extends interface 'BackendServiceApi'.
The types of 'service.init' are incompatible between these types.
Type '(serviceOptions: Partial, pagination?: Pagination | undefined, grid?: any) => void' is not assignable to type '(serviceOptions?: BackendServiceOption | undefined, pagination?: Pagination | undefined, grid?: any) => void'.
[0m
4 export interface OdataServiceApi extends BackendServiceApi {
~~~~~~~~~~~~~~~
node_modules/angular-slickgrid/app/modules/angular-slickgrid/filters/autoCompleteFilter.d.ts:64:5 - error TS2416: Property 'setValues' in type 'AutoCompleteFilter' is not assignable to the same property in base type 'Filter'.
Type '(values: string | number | boolean | Date | SearchTerm[], operator?: "" | "" | "LT" | OperatorType | "<>" | "!=" | "=" | "==" | ">" | ">=" | "<" | "<=" | "a" | ... 20 more ... | undefined) => void' is not assignable to type '(values: string | number | boolean | Date | SearchTerm[] | undefined) => void'.
Types of parameters 'values' and 'values' are incompatible.
Type 'string | number | boolean | Date | SearchTerm[] | undefined' is not assignable to type 'string | number | boolean | Date | SearchTerm[]'.
Type 'undefined' is not assignable to type 'string | number | boolean | Date | SearchTerm[]'.

64 setValues(values: SearchTerm | SearchTerm[], operator?: OperatorType | OperatorString): void;
~~~~~~~~~
node_modules/angular-slickgrid/app/modules/angular-slickgrid/filters/compoundDateFilter.d.ts:48:5 - error TS2416: Property 'setValues' in type 'CompoundDateFilter' is not assignable to the same property in base type 'Filter'.
Type '(values: string | number | boolean | Date | SearchTerm[], operator?: "" | "" | "LT" | OperatorType | "<>" | "!=" | "=" | "==" | ">" | ">=" | "<" | "<=" | "a" | ... 20 more ... | undefined) => void' is not assignable to type '(values: string | number | boolean | Date | SearchTerm[] | undefined) => void'.
Types of parameters 'values' and 'values' are incompatible.
Type 'string | number | boolean | Date | SearchTerm[] | undefined' is not assignable to type 'string | number | boolean | Date | SearchTerm[]'.
Type 'undefined' is not assignable to type 'string | number | boolean | Date | SearchTerm[]'.

48 setValues(values: SearchTerm | SearchTerm[], operator?: OperatorType | OperatorString): void;
~~~~~~~~~
node_modules/angular-slickgrid/app/modules/angular-slickgrid/filters/compoundInputFilter.d.ts:43:5 - error TS2416: Property 'setValues' in type 'CompoundInputFilter' is not assignable to the same property in base type 'Filter'.
Type '(values: SearchTerm[], operator?: "" | "" | "LT" | OperatorType | "<>" | "!=" | "=" | "==" | ">" | ">=" | "<" | "<=" | "a" | "*z" | "EQ" | "GE" | "GT" | "NE" | "LE" | ... 14 more ... | undefined) => void' is not assignable to type '(values: string | number | boolean | Date | SearchTerm[] | undefined) => void'.
Types of parameters 'values' and 'values' are incompatible.
Type 'string | number | boolean | Date | SearchTerm[] | undefined' is not assignable to type 'SearchTerm[]'.
Type 'undefined' is not assignable to type 'SearchTerm[]'.

43 setValues(values: SearchTerm[], operator?: OperatorType | OperatorString): void;
~~~~~~~~~
node_modules/angular-slickgrid/app/modules/angular-slickgrid/filters/compoundSliderFilter.d.ts:43:5 - error TS2416: Property 'setValues' in type 'CompoundSliderFilter' is not assignable to the same property in base type 'Filter'.
Type '(values: string | number | boolean | Date | SearchTerm[], operator?: "" | "" | "LT" | OperatorType | "<>" | "!=" | "=" | "==" | ">" | ">=" | "<" | "<=" | "a" | ... 20 more ... | undefined) => void' is not assignable to type '(values: string | number | boolean | Date | SearchTerm[] | undefined) => void'.
Types of parameters 'values' and 'values' are incompatible.
Type 'string | number | boolean | Date | SearchTerm[] | undefined' is not assignable to type 'string | number | boolean | Date | SearchTerm[]'.
Type 'undefined' is not assignable to type 'string | number | boolean | Date | SearchTerm[]'.

43 setValues(values: SearchTerm | SearchTerm[], operator?: OperatorType | OperatorString): void;
~~~~~~~~~
node_modules/angular-slickgrid/app/modules/angular-slickgrid/filters/inputFilter.d.ts:37:5 - error TS2416: Property 'setValues' in type 'InputFilter' is not assignable to the same property in base type 'Filter'.
Type '(values: SearchTerm, operator?: "" | "" | "LT" | OperatorType | "<>" | "!=" | "=" | "==" | ">" | ">=" | "<" | "<=" | "a" | "*z" | "EQ" | "GE" | "GT" | "NE" | "LE" | ... 14 more ... | undefined) => void' is not assignable to type '(values: string | number | boolean | Date | SearchTerm[] | undefined) => void'.
Types of parameters 'values' and 'values' are incompatible.
Type 'string | number | boolean | Date | SearchTerm[] | undefined' is not assignable to type 'SearchTerm'.
Type 'undefined' is not assignable to type 'SearchTerm'.

37 setValues(values: SearchTerm, operator?: OperatorType | OperatorString): void;
~~~~~~~~~
node_modules/angular-slickgrid/app/modules/angular-slickgrid/filters/selectFilter.d.ts:52:5 - error TS2416: Property 'init' in type 'SelectFilter' is not assignable to the same property in base type 'Filter'.
Type '(args: FilterArguments, isFilterFirstRender: boolean) => Promise' is not assignable to type '(args: FilterArguments, isFilterFirstRender?: boolean | undefined) => void'.
Types of parameters 'isFilterFirstRender' and 'isFilterFirstRender' are incompatible.
Type 'boolean | undefined' is not assignable to type 'boolean'.
Type 'undefined' is not assignable to type 'boolean'.

52 init(args: FilterArguments, isFilterFirstRender: boolean): Promise;
~~~~
node_modules/angular-slickgrid/app/modules/angular-slickgrid/filters/selectFilter.d.ts:67:5 - error TS2416: Property 'setValues' in type 'SelectFilter' is not assignable to the same property in base type 'Filter'.
Type '(values: string | number | boolean | Date | SearchTerm[], operator?: "" | "" | "LT" | OperatorType | "<>" | "!=" | "=" | "==" | ">" | ">=" | "<" | "<=" | "a" | ... 20 more ... | undefined) => void' is not assignable to type '(values: string | number | boolean | Date | SearchTerm[] | undefined) => void'.
Types of parameters 'values' and 'values' are incompatible.
Type 'string | number | boolean | Date | SearchTerm[] | undefined' is not assignable to type 'string | number | boolean | Date | SearchTerm[]'.
Type 'undefined' is not assignable to type 'string | number | boolean | Date | SearchTerm[]'.

67 setValues(values: SearchTerm | SearchTerm[], operator?: OperatorType | OperatorString): void;
~~~~~~~~~
node_modules/angular-slickgrid/app/modules/angular-slickgrid/filters/nativeSelectFilter.d.ts:40:5 - error TS2416: Property 'setValues' in type 'NativeSelectFilter' is not assignable to the same property in base type 'Filter'.
Type '(values: string | number | boolean | Date | SearchTerm[], operator?: "" | "" | "LT" | OperatorType | "<>" | "!=" | "=" | "==" | ">" | ">=" | "<" | "<=" | "a" | ... 20 more ... | undefined) => void' is not assignable to type '(values: string | number | boolean | Date | SearchTerm[] | undefined) => void'.
Types of parameters 'values' and 'values' are incompatible.
Type 'string | number | boolean | Date | SearchTerm[] | undefined' is not assignable to type 'string | number | boolean | Date | SearchTerm[]'.
Type 'undefined' is not assignable to type 'string | number | boolean | Date | SearchTerm[]'.

40 setValues(values: SearchTerm | SearchTerm[], operator?: OperatorType | OperatorString): void;
~~~~~~~~~
node_modules/angular-slickgrid/app/modules/angular-slickgrid/filters/dateRangeFilter.d.ts:50:5 - error TS2416: Property 'setValues' in type 'DateRangeFilter' is not assignable to the same property in base type 'Filter'.
Type '(searchTerms: SearchTerm[], operator?: "" | "" | "LT" | OperatorType | "<>" | "!=" | "=" | "==" | ">" | ">=" | "<" | "<=" | "a" | "*z" | "EQ" | "GE" | "GT" | "NE" | "LE" | ... 14 more ... | undefined) => void' is not assignable to type '(values: string | number | boolean | Date | SearchTerm[] | undefined) => void'.
Types of parameters 'searchTerms' and 'values' are incompatible.
Type 'string | number | boolean | Date | SearchTerm[] | undefined' is not assignable to type 'SearchTerm[]'.
Type 'undefined' is not assignable to type 'SearchTerm[]'.

50 setValues(searchTerms: SearchTerm[], operator?: OperatorType | OperatorString): void;
~~~~~~~~~
node_modules/angular-slickgrid/app/modules/angular-slickgrid/filters/sliderFilter.d.ts:41:5 - error TS2416: Property 'setValues' in type 'SliderFilter' is not assignable to the same property in base type 'Filter'.
Type '(values: string | number | boolean | Date | SearchTerm[], operator?: "" | "" | "LT" | OperatorType | "<>" | "!=" | "=" | "==" | ">" | ">=" | "<" | "<=" | "a" | ... 20 more ... | undefined) => void' is not assignable to type '(values: string | number | boolean | Date | SearchTerm[] | undefined) => void'.
Types of parameters 'values' and 'values' are incompatible.
Type 'string | number | boolean | Date | SearchTerm[] | undefined' is not assignable to type 'string | number | boolean | Date | SearchTerm[]'.
Type 'undefined' is not assignable to type 'string | number | boolean | Date | SearchTerm[]'.

41 setValues(values: SearchTerm | SearchTerm[], operator?: OperatorType | OperatorString): void;
~~~~~~~~~
node_modules/angular-slickgrid/app/modules/angular-slickgrid/filters/sliderRangeFilter.d.ts:53:5 - error TS2416: Property 'setValues' in type 'SliderRangeFilter' is not assignable to the same property in base type 'Filter'.
Type '(searchTerms: string | number | boolean | Date | SearchTerm[], operator?: "" | "*" | "LT" | OperatorType | "<>" | "!=" | "=" | "==" | ">" | ">=" | "<" | "<=" | ... 21 more ... | undefined) => void' is not assignable to type '(values: string | number | boolean | Date | SearchTerm[] | undefined) => void'.
Types of parameters 'searchTerms' and 'values' are incompatible.
Type 'string | number | boolean | Date | SearchTerm[] | undefined' is not assignable to type 'string | number | boolean | Date | SearchTerm[]'.
Type 'undefined' is not assignable to type 'string | number | boolean | Date | SearchTerm[]'.

53 setValues(searchTerms: SearchTerm | SearchTerm[], operator?: OperatorType | OperatorString): void;

[close-issue-app]

This issue was automatically closed by our bot because it does not meet our issue template requirements. Please fill in the questions/sections which are tagged as in the issue template before submitting a new issue... Please also consider asking any coding questions on Stack Overflow. Thank you.

[ghiscoding]

Angular-Slickgrid works properly with Angular 11 and just to make sure I upgraded all the Angular-Slickgrid-Demos as well in this PR and everything is working fine. The issue is on your side and I can't help you with that. Lastly there is 0 useful information in your issue because you completely skipped what is required by filling in the form, which is also why the bot auto-closed your issue... So good luck, the issue is in your hand

[sapnildessai]

Thanks @ghiscoding . Apologies for not filing in the details for the issue, I was in hurry when I posted it. I have created new angular 11 project today and have included slick grid in it. Adding skipLibCheck in compiler option fixed the issue.
do you think by tslint should exclude node_modules folder? I think this is not happening in my case.

[ghiscoding]

do you think by tslint should exclude node_modules folder?

this is outside the scope of this library and is not an issue with the library itself, so your question should be asked somewhere else or just google it. The Angular-Slickgrid-Demos doesn't have this issue and it works properly, so you should refer to it. Also tslint will be replaced by eslint in the near future, probably Angular 12.

[sapnildessai]

ok. I have figured it out. The problem is with "strict":true setting in tsconfig.json. If we use this setting in Angular-Slickgrid-Demos project even that fails with same errors as above. When creating new Angular 11 app tsconfig is adding strict mode set to true and hence very tight type checks are made in the project. For now i have removed this setting from my project and everything is working fine. :)

[ghiscoding]

@sapnildessai
That took a lot of effort but it's all done now, see PR #702, so you can now use it "strict": true if you wish to.
See latest version 2.26.1

Cheers ⭐

[sapnildessai]

@ghiscoding Thank you so much. I will take this version of the library now. :-)