如何修复Angular项目'mat-icon' is not a known element报错问题

核心错误原因 #

• 你的WidgetModule虽然导入了MatIconModule，但未将其加入exports数组，其他导入WidgetModule的模块无法获取到MatIcon相关组件
• 你的SndComingSoonPageComponent暂未声明在任何模块的declarations数组中，当前FeatureModule的声明数组为空，未纳入该页面组件

修复步骤 #

1. 调整WidgetModule导出配置 #

在widget.module.ts的exports数组中加入需要共享给外部模块使用的组件模块：

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    MatProgressBarModule,
    MatButtonModule,
    MatMenuModule,
    MatIconModule,
    MatDividerModule,
  ],
  // 新增exports配置，共享公共模块
  exports: [
    MatIconModule,
    MatButtonModule,
    MatMenuModule,
    MatDividerModule,
    MatProgressBarModule,
    FormsModule,
    ReactiveFormsModule
  ]
})
export class WidgetModule {}

2. 将页面组件声明到对应模块 #

你的SndComingSoonPageComponent存放在feature/pages目录下，归属FeatureModule管理，在feature.module.ts的declarations数组中加入该组件：

import { SndComingSoonPageComponent } from './pages/snd-coming-soon-page/snd-coming-soon-page.component';

@NgModule({
  imports: [
    CommonModule,
    WidgetModule,
    ReactiveFormsModule,
    MatFormFieldModule,
    MatInputModule,
    MatButtonModule,
    MatDividerModule,
  ],
  // 声明页面组件
  declarations: [SndComingSoonPageComponent],
})
export class FeatureModule {}

修改完成后重启开发服务即可正常使用mat-icon组件。

可选方案：如果你不需要通过WidgetModule全局共享MatIcon能力，也可以直接在FeatureModule的imports数组中单独导入MatIconModule，无需修改WidgetModule配置，也能让该模块下的页面组件正常使用mat-icon。

如何判断页面组件所属模块 #

判定规则如下：

• 按目录约定判断：通常业务页面组件放在哪个业务模块的目录下，就归属对应模块管理，比如你这个组件在feature目录下就归属FeatureModule
• 按声明规则判断：Angular要求每个组件必须且仅能在一个NgModule的declarations数组中声明，哪个模块的declarations包含该组件，它就属于哪个模块
• 按路由配置判断：如果是懒加载路由，路由配置中loadChildren指向的模块，就是对应路由下所有页面组件的归属模块

内容的提问来源于stack exchange，提问作者Newsha Nik