Upgrading to Angular 10 + nebular 6 + Typescript 4.0.2 results in NbColumnDefDirective + NbTreeGridxxxxxDefDirective errors

[argupta23]

Issue type

I'm submitting a ... (check one with "x")

• [ x ] bug report
• feature request

Issue description

Current behavior:
Upgrading current project based on Angular 9 + nebular 5 to Angular10 + nebular 6 results in the following errors during compilation.

ERROR in node_modules/@nebular/theme/components/cdk/table/cell.d.ts:35:5 - error TS2610: 'name' is defined as an accessor in class 'CdkColumnDef', but is overridden here in 'NbColumnDefDirective' as an instance property.

35     name: string;
       ~~~~
node_modules/@nebular/theme/components/cdk/table/cell.d.ts:39:5 - error TS2610: 'stickyEnd' is defined as an accessor in class 'CdkColumnDef', but is overridden here in 'NbColumnDefDirective' as an instance property.

39     stickyEnd: boolean;
       ~~~~~~~~~
node_modules/@nebular/theme/components/tree-grid/tree-grid-def.component.d.ts:19:9 - error TS2611: 'columns' is defined as a property in class 'NbRowDefDirective<T>', but is overridden here in 'NbTreeGridRowDefDirective<T>' as an accessor.

19     set columns(value: Iterable<string>);
           ~~~~~~~
node_modules/@nebular/theme/components/tree-grid/tree-grid-def.component.d.ts:34:9 - error TS2611: 'columns' is defined as a property in class 'NbHeaderRowDefDirective', but is overridden here in 'NbTreeGridHeaderRowDefDirective' as an accessor.

34     set columns(value: Iterable<string>);
           ~~~~~~~
node_modules/@nebular/theme/components/tree-grid/tree-grid-def.component.d.ts:49:9 - error TS2611: 'columns' is defined as a property in class 'NbFooterRowDefDirective', but is overridden here in 'NbTreeGridFooterRowDefDirective' as an accessor.

49     set columns(value: Iterable<string>);
           ~~~~~~~

Expected behavior:
Upgrade should work seamlessly.

Other information:

npm, node, OS, Browser

node -v v12.18.2
npm -v 6.14.7

Angular, Nebular

    "@angular/animations": "^10.1.0",
    "@angular/common": "^10.1.0",
    "@angular/compiler": "^10.1.0",
    "@angular/core": "^10.1.0",
    "@angular/elements": "^10.1.0",
    "@angular/flex-layout": "^10.0.0-beta.32",
    "@angular/forms": "^10.1.0",
    "@angular/google-maps": "^9.1.0",
    "@angular/material": "^10.2.0",
    "@angular/platform-browser": "^10.1.0",
    "@angular/platform-browser-dynamic": "^10.1.0",
    "@angular/router": "^10.1.0",
    "@nebular/eva-icons": "^6.0.1",
    "@nebular/moment": "^6.0.1",
    "@nebular/security": "^6.0.1",
    "@nebular/theme": "^6.0.1",

[leduclinh7141]

Same here. I had to downgrade my project's typescript version from 4.0.2 to 3.9.7 as a workaround.

[argupta23]

@leduclinh7141 thanks for sharing the info. That indeed fixes the issue.

[argupta23]

@yggg

Any plans to add support for Typescript 4.0.2?

Thanks

[Suroor-Ahmmad]

one more issue with NbTreeGrid #2449

[softgandhi]

I am also getting the same issue while upgrading to angular 10. Downgrading tslint to 5.15.0 and typescript 3.9.7 worked!!
Hope to get the fix for the same for the latest version of typescript and tslint soon.
Thanks.

[sgClaudia98]

Same Here, waiting support for TypeScript 4. Also Downgrade typescript to 3.9.7, fix the issue

[yggg]

Version 6.2.0 with TypeScript 4 support is available on npm. Please note, you also need to update @angular/cdk to versions 10.2.1+.

[haziqAhmed7]

@yggg
I am getting this error

ERROR in node_modules/@nebular/theme/components/cdk/table/cell.d.ts:35:5 - error TS2610: 'name' is defined as an accessor in class 'CdkColumnDef', but is overridden here in 'NbColumnDefDirective' as an instance property.

35 name: string;
~~~~
node_modules/@nebular/theme/components/cdk/table/cell.d.ts:39:5 - error TS2610: 'stickyEnd' is defined as an accessor in class 'CdkColumnDef', but is overridden here in 'NbColumnDefDirective' as an instance property.

39 stickyEnd: boolean;
~~~~~~~~~
node Version 10.16.3

npm version 6.9.0

Angular

"@angular/cdk": "10.2.5", "@angular/common": "11.0.0-next.6", "@angular/compiler": "11.0.0-next.6", "@angular/core": "11.0.0-next.6", "@angular/forms": "11.0.0-next.6", "@angular/material": "10.2.5", "@nebular/theme": "^4.6.0",

[wauchi]

Are there any updates on this issue?
I'm having the exact same error as @haziqAhmed7

[sajal-n]

I am having similar issue when upgraded to @angular 11.
Is there a resolution to this issue ? I guess typescript cannot be downgraded below 4 with Angular11

[eddyizm]

yeah, downgrading seems like a bad idea since getting to Angular 10 is already falling behind a bit. Same issue.
Following the link to @yggg ticket, Changing those two versions in the package.json file and updating did the trick.

found these two in package.json

 "dependencies": {
      "@angular/cdk": "^9.0.0",
      "@nebular/theme": "^5.1.0",

and changed to:

 "dependencies": {
       "@angular/cdk": "^10.2.1",
       "@nebular/theme": "^6.2.0",

Then ran npm install and my project is back up successfully!