升级至 angular 19 后报错: "Type 'FlatTreeControl' is not assignable to type 'TreeControl'"

悬赏园豆：30 [已解决问题] 解决于 2024-12-20 16:26

园子博客后台从 angular 17 升级到 angular 19 后，下面的代码

<nz-tree-view [nzDataSource]="treeDataSource"
    [nzTreeControl]="treeControl"
    [nzBlockNode]="true">

build 时报错

Type 'FlatTreeControl<BlogCategoryFlatNode, BlogCategoryFlatNode>' is not assignable to type 'TreeControl<BlogCategoryFlatNode, any>'.
  Types of property 'expansionModel' are incompatible.
    Type 'SelectionModel<BlogCategoryFlatNode>' is not assignable to type 'SelectionModel<any>'.
      Types have separate declarations of a private property '_multiple'.
                   [nzTreeControl]="treeControl"

请问如何解决这个问题？

web前端 angular

问题补充：

这个问题可能与 BlogCategoryTreeDataSourceProvider 中的这个错误有关

Argument of type 'import("node_modules/@angular/cdk/tree/index").FlatTreeControl<import("sidebar-blog-categories/model").BlogCategoryFlatNode, import("...").logCategoryFlatNode is not assignable to parameter of type 'import("node_modules/@angular/cdk/tree/index").FlatTreeControl<import("sidebar-blog-categories/model").BlogCategoryFlatNode'.
  Types of property 'expansionModel' are incompatible.
    Type 'import("node_modules/@angular/cdk/collections/index").SelectionModel<import("sidebar-blog-categories/model").BlogCategoryFlatNode>' is not assignable to type 'import("node_modules/@angular/cdk/collections/index").SelectionModel<import("sidebar-blog-categories/model").BlogCategoryFlatNode'.
      Types have separate declarations of a private property '_multiple'.ts(2345)

idebar-blog-categories/model 中的代码：

export interface BlogCategoryFlatNode extends BlogCategoryEditDto {
    level: number;
    isLoading?: Observable<boolean> | null;
    isHidden?: boolean;
}

export class BlogCategoryTreeDataSource extends NzTreeFlatDataSource<
    BlogCategoryEditDto,
    BlogCategoryFlatNode
> {
    get flattenedNodes() {
        return this._flattenedData.getValue();
    }

    setFlattenedData(data?: BlogCategoryFlatNode[] | null) {
        if (data) this._flattenedData.next(data);
    }
}

export class BlogCategoryTreeFlattener extends NzTreeFlattener<
    BlogCategoryEditDto,
    BlogCategoryFlatNode
> {}

dudu | 高人七级 | 园豆：29642
提问于：2024-12-02 22:33

Working with the Angular tree

– dudu 2周前

< >

最佳答案

从 stackoverflow 上的问题 Types have separate declarations of a private property 的一个回答中知道了原因，是应用与 ng-zorro-antd 所依赖的 npm 包 @angular/cdk 版本不一致引起的

This also happens in cases, were dependencies version mistatch. [From typescript perspective]

For example if your app A uses version 1.0 of a package B, and version 1.0 of package C. However package C uses a different version of package B, say 2.0.

Now you have two different classes with same name in overall build process. To resolve it you must get package C upgraded or package B upgraded, so to have same version accross the App.

从 package-lock.json 看 ng-zorro-antd 依赖的是 @angular/cdk 18.0.0

从 package.json 看应用所依赖的是 @angular/cdk 19.0.1，

ng-zorro-antd 目前不支持 angular 19，要等支持 angular 19，已经有 PR 在准备升级 —— chore: bump angular to v19

dudu | 高人七级 |园豆：29642 | 2024-12-04 16:43

支持 angular 19 的 ng-zorro-antd 预览版 19.0.0-beta.0 已发布 https://github.com/NG-ZORRO/ng-zorro-antd/releases/tag/19.0.0-beta.0

dudu | 园豆：29642 (高人七级) | 2024-12-06 18:58

ng-zorro-antd 19 正式版今天发布了 https://github.com/NG-ZORRO/ng-zorro-antd/releases/tag/19.0.0

dudu | 园豆：29642 (高人七级) | 2024-12-20 16:26

其他回答(1)

在将 Angular 升级到 19 后遇到的 "Type 'FlatTreeControl' is not assignable to type 'TreeControl'" 报错，通常是由于 Angular Material 或相关库（例如 ng-zorro-antd）中的类型定义有变化导致的。这种情况可以通过以下步骤来解决：

解决步骤

检查依赖版本：
确保你的 ng-zorro-antd 和其他相关库（如 @angular/material）的版本与 Angular 19 兼容。可以在项目的 package.json 中查看和修改版本号。
```
{
  "dependencies": {
    "@angular/core": "^19.0.0",
    "ng-zorro-antd": "^15.0.0" // 根据 ng-zorro-antd 的最新版本更新
  }
}
```
然后运行：
```
npm install
```

更新类型使用：
对于 TreeControl 和 FlatTreeControl 的类型使用，确保你在代码中正确配置了数据源和树控件。一般来说， FlatTreeControl 适用树形数据，如果你使用的是 FlatTreeControl，你需要确保它与 nz-tree-view 兼容。

例如，确保定义正确，类似如下：

import { FlatTreeControl } from '@angular/cdk/tree';
import { NzTreeNode } from 'ng-zorro-antd/tree-view';

// 你的节点定义
export interface BlogCategoryFlatNode {
  // Define your properties here.
}

// 创建 FlatTreeControl
treeControl = new FlatTreeControl<BlogCategoryFlatNode>(
  // 传入相关的参数
);

使用类型断言：
如果仍然有类型问题，可以使用类型断言来解决。例如：
```
[nzTreeControl]="treeControl as TreeControl<BlogCategoryFlatNode, any>"
```
但是请注意，这种方法并不总是推荐。最好还是检查源代码确保类型兼容。
查看文档和更新日志：
在升级到新版本后，官方文档的更新日志通常提供了一些迁移指南和类型更改的信息。这对于理解重大版本之间的差异非常重要。访问 ng-zorro-antd 的文档和 Angular 的迁移指南。
社区支持：
如果以上步骤无效，可以考虑在相关社区（例如 GitHub、Stack Overflow）中提问，提供代码和错误详细信息，其他开发者可能遇到过相同的问题。

通过这些步骤，您应该能够解决类型不匹配的问题。如有更多问题或需要进一步的指导，欢迎询问！

收获园豆：30

Technologyforgood | 园豆：7775 (大侠五级) | 2024-12-03 16:33

清除回答草稿

您需要登录以后才能回答，未注册用户请先注册。

欢迎，请先 登录 或者 注册 。

升级至 angular 19 后报错: "Type 'FlatTreeControl' is not assignable to type 'TreeControl'"

解决步骤

欢迎，请先登录或者注册。