Updating to Angular 11

I’ve followed the Upgrade directions to go from 10 to 11 and my App is working.  However, I am getting a pair of compiler errors:

Generating browser application bundles (phase: additional asset processing)…
Error: node_modules/@infragistics/igniteui-angular/lib/grids/common/pipes.d.ts:97:5 – error TS2416: Property ‘transform’ in type ‘IgxDatePipeComponent’ is not assignable to the same property in base type ‘DatePipe’.
Type ‘(value: any, locale: string) => string’ is not assignable to type ‘{ (value: string | number | Date, format?: string, timezone?: string, locale?: string): string; (value: null, format?: string, timezone?: string, locale?
: string): null; (value: string | number | Date, format?: string, timezone?: string, locale?: string): string; }’.
Type ‘string’ is not assignable to type ‘null’.

97 transform(value: any, locale: string): string;
~~~~~~~~~
node_modules/@infragistics/igniteui-angular/lib/grids/common/pipes.d.ts:107:5 – error TS2416: Property ‘transform’ in type ‘IgxDecimalPipeComponent’ is not assignable to the same property in base type ‘DecimalPipe’.
Type ‘(value: any, locale: string) => string’ is not assignable to type ‘{ (value: string | number, digitsInfo?: string, locale?: string): string; (value: null, digitsInfo?: string, locale?: string): null; (value: string | num
ber, digitsInfo?: string, locale?: string): string; }’.
Type ‘string’ is not assignable to type ‘null’.

107 transform(value: any, locale: string): string;
~~~~~~~~~

√ Browser application bundle generation complete.

Any ideas why this should be happening?  I am using the Pipe in several places, part of using the Ignite Autocomplete, but the error is only showing up for the Date and Decimal Pipes.  Is there a fix?  My ‘ng update’ says everything is updated.

Hello Ted,

Thank you for posting on our forums.

I believe this is caused by the stricter typing in common pipes in angular 11(link) where overloading is used.

I would suggest adding further overloads for the transform method to match the data types you have used.

e.g:

transform(DateValue: null | undefined, args?: string): null;
transform(DateValue: number, args: string): string | null {
  …
}

Should you need further assistance, please let me know.

Sincerely,
Tihomir Tonev
Associate Software Developer
Infragistics