已导入依赖仍报错：'mat-tree'不是已知元素的技术问询

1. 确认MatTree模块的导入范围是否正确 #

• 若使用独立组件，需在组件的imports数组中直接导入MatTreeModule（嵌套树需额外导入MatTreeNestedDataSource）：

  import { Component } from '@angular/core';
  import { MatTreeModule, MatTreeNestedDataSource } from '@angular/material/tree';
  import { CommonModule } from '@angular/common';
  
  @Component({
    selector: 'app-your-tree',
    standalone: true,
    imports: [CommonModule, MatTreeModule], // 必须在此处导入
    templateUrl: './your-tree.component.html',
    styleUrls: ['./your-tree.component.css']
  })
  export class YourTreeComponent {
    dataSource = new MatTreeNestedDataSource<any>();
    // 其他业务代码
  }
  

• 若使用NgModule，需确保组件所属模块的imports数组中导入MatTreeModule，而非仅在组件内导入：

  import { NgModule } from '@angular/core';
  import { MatTreeModule } from '@angular/material/tree';
  import { YourTreeComponent } from './your-tree.component';
  import { CommonModule } from '@angular/common';
  
  @NgModule({
    declarations: [YourTreeComponent],
    imports: [CommonModule, MatTreeModule], // 模块级别导入
    exports: [YourTreeComponent]
  })
  export class YourTreeModule { }
  

2. 检查Material与Angular的版本兼容性 #

Angular 13需搭配同版本的Angular Material，确认package.json中@angular/material与@angular/core版本均为13.x.x：

{
  "dependencies": {
    "@angular/core": "~13.3.0",
    "@angular/material": "~13.3.0"
    // 其他依赖
  }
}

版本不匹配时，执行命令更新：

npm install @angular/material@13.3.0 --save

3. 确认是否导入附属功能模块 #

若树组件使用了展开/折叠图标、节点选择等功能，需额外导入对应模块：

// 在NgModule或独立组件的imports中添加
import { MatIconModule } from '@angular/material/icon';
import { MatCheckboxModule } from '@angular/material/checkbox';

4. 清理缓存并重启开发服务器 #

缓存可能导致模块未被正确识别，执行以下步骤：

• 停止当前开发服务器（Ctrl+C）
• 删除依赖文件：

  rm -rf node_modules package-lock.json # Linux/Mac
  # Windows系统执行：
  rmdir /s /q node_modules && del package-lock.json
  

• 重新安装依赖：

  npm install
  

• 重启开发服务器：

  ng serve
  

5. 检查模板拼写错误 #

确保模板中使用正确的选择器mat-tree，避免拼写错误：

<!-- 正确写法 -->
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
  <!-- 节点模板内容 -->
</mat-tree>

内容的提问来源于stack exchange，提问作者Divya mishra