Error: 'recursive' is defined as a property in class 'CdkTreeNodeToggle<T, T>', overridden in 'NzTreeNodeToggleDirective'

[Coder-Zertrax]

Reproduction link

https://github.com/NG-ZORRO/ng-zorro-antd/

Steps to reproduce

Install nz-zorro with angular cdk

What is expected?

no errors with successful build.

What is actually happening?

Errormessage while building the project with ng serve:

Error: node_modules/ng-zorro-antd/tree-view/toggle.d.ts:10:9 
- error TS2611: 'recursive' is defined as a property in class 'CdkTreeNodeToggle<T, T>',
  but is overridden here in 'NzTreeNodeToggleDirective<T>' as an accessor.
10     get recursive(): boolean;
           ~~~~~~~~~

Environment	Info
ng-zorro-antd	17.1.0
Browser	None

---

When I remove the get and set in the declared class in toggle.d.ts. everything works, but this is no solution. I deleted my whole node_modules and retryed npm i. Didn't helped. Found no solution in web. current package.json dependencies: "@angular/animations": "^17.1.0", "@angular/cdk": "^17.1.0", "@angular/common": "^17.1.0", "@angular/compiler": "^17.1.0", "@angular/core": "^17.1.0", "@angular/forms": "^17.1.0", "@angular/platform-browser": "^17.1.0", "@angular/platform-browser-dynamic": "^17.1.0", "@angular/router": "^17.1.0", "@angular/service-worker": "^17.1.0", "@ant-design/icons-angular": "^17.0.0", "@capacitor-community/sqlite": "^5.4.2-2", "@capacitor/core": "^5.5.1", "@fortawesome/angular-fontawesome": "^0.14.0", "@fortawesome/fontawesome-svg-core": "^6.4.2", "@fortawesome/free-brands-svg-icons": "^6.4.2", "@fortawesome/free-regular-svg-icons": "^6.4.2", "@fortawesome/free-solid-svg-icons": "^6.4.2", "@ngxs/storage-plugin": "^3.8.2", "@ngxs/store": "^3.8.2", "@types/intro.js": "^5.1.4", "cytoscape": "^3.25.0", "d3": "^7.8.5", "d3-timelines": "^1.3.1", "intro.js": "^7.0.1", "jeep-sqlite": "^2.3.4", "jszip": "^3.10.1", "ng-zorro-antd": "^17.1.0", "rxjs": "\~7.8.0", "tslib": "^2.6.2", "zone.js": "\~0.14.2"

devDependencies: "@angular-devkit/build-angular": "^17.1.0", "@angular-eslint/builder": "^17.2.0", "@angular-eslint/eslint-plugin": "^17.2.0", "@angular-eslint/eslint-plugin-template": "^17.2.0", "@angular-eslint/schematics": "^17.2.0", "@angular-eslint/template-parser": "^17.2.0", "@angular/cli": "^17.1.0", "@angular/compiler-cli": "^17.1.0", "@biomejs/biome": "1.4.1", "@capacitor/cli": "^5.5.1", "@ngxs/devtools-plugin": "^3.8.2", "@types/cytoscape": "^3.19.15", "@types/d3": "^7.4.3", "@types/jasmine": "\~5.1.0", "@types/node": "^20.9.1", "@typescript-eslint/eslint-plugin": "^6.11.0", "@typescript-eslint/parser": "^6.11.0", "eslint": "^8.53.0", "jasmine-core": "\~5.1.0", "karma": "\~6.4.0", "karma-chrome-launcher": "\~3.2.0", "karma-coverage": "\~2.2.0", "karma-jasmine": "\~5.1.0", "karma-jasmine-html-reporter": "\~2.1.0", "typescript": "~5.3.3"

[ksrae]

I also have same issue. I think it is because there is `recursive: boolean' in CdkTreeNodeToggle. I temporary remove get recursive() and set recursive(value: boolean) from NzTreeNodeToggleDirective. but I am also waiting to fix this issue ASAP.

[ParsaArvanehPA]

Greetings @Coder-Zertrax @ksrae, I have created a stackblitz with the same configurations that @Coder-Zertrax provided. I do not encounter any error; please provide more details. I am using the basic part in ng-zorro documentation.

Could you please review it and tell me what I should change to reproduce the same error as yours? Even better If you could provide a stackblitz yourselves.

Additionally, please verify your imports. Remove all the imports related to tree view in your component import section, and import only NzTreeViewModule. Then, check if the issue is fixed or not. The cause of the problem might be the import of the new standalone component/directives.

[DimkaIvanyushin]

Heeeeelp!!!!!!!!

[Coder-Zertrax]

Idk why, but the issue is solved by itself. I changed nothing. Just worked on another branch and tested the installation some minutes again. I think CdkTreeNodeToggle<T,K=T> has been changed somehow? When I wrote this issue, CdkTreeNodeToggle<T,K=T> (node_modules\@angular\cdk\tree\index.d.ts) had a variable recursive: boolean;. Now it's changed to get recursive(): boolean; and set recursive(value: BooleanInput); like in the toggle.d.ts. When I manually change the getter and setter to the variable, I get the exact same error, like I mentioned in my first post. Maybe something changed in the CdkTreeNodeToggle in the last hours on npm? Idk.

EDIT: But my Pipline on GitLab throws the same error. Hmm, I'm baffled. Currently it works on my local machine.

EDIT 2: I killed my package-lock.json and my node_modules folder again and tried npm i again. It's broken again. Maybe NPM downloads a wrong version of angular/cdk?

EDIT 3: I reproduced it with the following steps: (I use npm v8.8.0 and node v21.5.0)

1. Create a new Angular Project on your local machine (not stackblitz): ng new test-17-1-0
2. Delete the created node_modules and package-lock.json file.
3. Run npm i in the project folder.
4. Import your code from main.ts file from stackblitz into your app.component.ts and the same package.json I mentioned in my first post.
5. Run ng serve.

Or just download Step 1, 2 & 4 and hit npm i and ng serve: test-17-1-0.zip

result:

[ParsaArvanehPA]

Idk why, but the issue is solved by itself. I changed nothing. Just worked on another branch and tested the installation some minutes again. I think CdkTreeNodeToggle<T,K=T> has been changed somehow? When I wrote this issue, CdkTreeNodeToggle<T,K=T> (node_modules@angular\cdk\tree\index.d.ts) had a variable recursive: boolean;. Now it's changed to get recursive(): boolean; and set recursive(value: BooleanInput); like in the toggle.d.ts. When I manually change the getter and setter to the variable, I get the exact same error, like I mentioned in my first post. Maybe something changed in the CdkTreeNodeToggle in the last hours on npm? Idk.

EDIT: But my Pipline on GitLab throws the same error. Hmm, I'm baffled. Currently it works on my local machine.

EDIT 2: I killed my package-lock.json and my node_modules folder again and tried npm i again. It's broken again. Maybe NPM downloads a wrong version of angular/cdk?

EDIT 3: I reproduced it with the following steps: (I use npm v8.8.0 and node v21.5.0)

1. Create a new Angular Project on your local machine (not stackblitz): ng new test-17-1-0
2. Delete the created node_modules and package-lock.json file.
3. Run npm i in the project folder.
4. Import your code from main.ts file from stackblitz into your app.component.ts and the same package.json I mentioned in my first post.
5. Run ng serve.

Or just download Step 1, 2 & 4 and hit npm i and ng serve: test-17-1-0.zip

result:

Yeah that's really odd what's been happening; i checked Angular/cdk and they haven't had any new updates in the last 2 day, so it couldn't have been a new release causing the issues.

Thank you for creating a reproducible scenario, I will get back to you as soon as I can.

[ParsaArvanehPA]

@Coder-Zertrax @ksrae @DimkaIvanyushin

Well the problem wasn't what I expected at all :)

In your tsconfig.json file, add this:

"skipLibCheck": true

[ParsaArvanehPA]

@Coder-Zertrax @ksrae @DimkaIvanyushin

Well the problem wasn't what I expected at all :)

In your tsconfig.json file, add this:

"skipLibCheck": true

For more info, I suggest you watch this video, dude is literally called ts wizard :); around 0.40 he explains why it is a good idea to have "skipLibCheck": true.

[Coder-Zertrax]

This is more a hotfix, not a real solution or? I will try it.

[ParsaArvanehPA]

This is more a hotfix, not a real solution or? I will try it.

Have you had the time to check it?

I don't know really what's changed recently; i tracked the recursive in cdk and it goes back to 7 years ago(link), and our recursive has been around for 4 years(link). So maybe others are using "skipLibCheck": true, since when you create angular app this is the default config.

@Coder-Zertrax Have you had any change in your tsconfig file recently? Maybe created a new angular project but copied an old angular project assets into it?

@ksrae And can you check that in your Angular v13, did you have this line of code in your tsconfig file?

I have to dig deeper, but for now this line of code should solve your server problem.

[Coder-Zertrax]

@ParsaArvanehPA I never changed the tsconfig since I work on this project (half a year). This project exists since angular 14 or 15. I added SkipLibCheck: true Yesterday, so my build will not fail. It works now. It works with 17.0.0 with SkipLibCheck: false.

When nobody changed anything, then node must has a niche bug or a transpiler or compiler has an bug. Idk.

EDIT: In the 1.7.0, there is the getter and setter. In 1.7.1 the getter and setter get switcht to a variable.

[qyjs]

It seems that the error is caused by importing {NzTreeViewModule} from "ng zorro antd/tree view";

[saup007]

I also have same issue.

[montella1507]

Same here :-))

[ningkexin]

Same