Angular 8/9/10升级至16后NG8001错误：mat-icon等组件未识别求助

问题背景 #

• 从Angular 8/9/10升级到16版本后，出现NG8001错误，提示mat-icon和mat-sidenav-container不是已知元素
• 已尝试的排查操作：导入所有Material模块、添加CUSTOM_ELEMENTS_SCHEMA、删除node_modules和package-lock.json重装、清除缓存、更新tsconfig.json，但问题未解决

错误详情 #

Error: src/app/pages/layout/top-header/top-header/top-header.component.html:160:13 - error NG8001: 'mat-icon' is not a known element:
If 'mat-icon' is an Angular component, then verify that it is part of this module.
If 'mat-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

Error: src/app/pages/layout/top-header/top-header/top-header.component.html:158:9 - error NG8001: 'mat-sidenav-container' is not a known element:
If 'mat-sidenav-container' is an Angular component, then verify that it is part of this module.
If 'mat-sidenav-container' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

针对性解决方案 #

1. 采用Angular 16要求的Material模块按需导入方式 #

Angular 16不再支持旧版的整体Material模块导入，必须按需导入对应组件的独立模块：

• 如果组件属于NgModule：在组件所在的模块文件中，明确导入MatIconModule和MatSidenavModule：

  import { MatIconModule } from '@angular/material/icon';
  import { MatSidenavModule } from '@angular/material/sidenav';
  
  @NgModule({
    declarations: [TopHeaderComponent],
    imports: [
      // 其他必要模块（如CommonModule等）
      MatIconModule,
      MatSidenavModule
    ]
  })
  export class TopHeaderModule {}
  

• 如果使用独立组件（Angular 14+特性）：直接在组件的imports数组中导入这些模块：

  @Component({
    selector: 'app-top-header',
    templateUrl: './top-header.component.html',
    styleUrls: ['./top-header.component.css'],
    standalone: true,
    imports: [MatIconModule, MatSidenavModule] // 此处导入
  })
  export class TopHeaderComponent {}
  

2. 确认模块导入层级正确 #

确保导入Material模块的是组件直接所属的模块，而非仅父模块导入。若父模块需要共享这些Material模块，需在父模块的exports数组中导出，再由子模块导入父模块。

3. 移除CUSTOM_ELEMENTS_SCHEMA #

mat-icon和mat-sidenav-container是Angular组件，不是Web组件，添加CUSTOM_ELEMENTS_SCHEMA会掩盖真实的模块缺失问题，建议从@NgModule.schemas中移除该配置。

4. 校验Angular与Material版本匹配 #

检查package.json中@angular/material版本是否与@angular/core、@angular/common等核心包版本完全一致（均为16.x.x）。若版本不匹配，执行更新命令：

ng update @angular/material@16

5. 检查模板选择器拼写 #

确认模板中mat-icon和mat-sidenav-container的拼写完全正确，无大小写或字符错误。

6. 彻底清理并重新构建 #

执行以下命令清理构建缓存并重新编译项目：

ng build --delete-output-path
ng cache clean

内容的提问来源于stack exchange，提问作者Chirantan Patel