Angular项目ng build出现大量Material相关未知元素/属性错误如何解决

一次性导入所有Angular Material子模块的实现方式 #

你可以自行封装一个统一的Material聚合模块，将所有需要的Material子模块统一导入后导出，即可在全项目共用，不需要每个模块单独导入。调试阶段可以临时把所有Material子模块都加入该模块来排查是否是导入不全导致的问题。
示例代码如下：

// src/app/shared/material.module.ts
import { NgModule } from '@angular/core';
// 把所有需要的Material子模块都在此处导入
import { MatIconModule } from '@angular/material/icon';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTabsModule } from '@angular/material/tabs';
import { MatChipsModule } from '@angular/material/chips';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
// 其他所有需要的Material模块都依次导入

@NgModule({
  imports: [
    MatIconModule,
    MatToolbarModule,
    MatTabsModule,
    MatChipsModule,
    MatFormFieldModule,
    MatInputModule,
    // 把所有导入的模块都加到这里
  ],
  exports: [
    MatIconModule,
    MatToolbarModule,
    MatTabsModule,
    MatChipsModule,
    MatFormFieldModule,
    MatInputModule,
    // 所有要对外暴露的模块都加到这里，让导入该模块的其他模块可以使用这些组件
  ]
})
export class MaterialModule { }

注意：生产环境不建议导入所有未使用的Material子模块，会显著增大打包体积，建议只导入实际用到的模块。

其他导致报错的原因及排查方案 #

• 基础依赖模块缺失
  你提到的ngModel相关报错，本质是没有导入FormsModule导致的，和Material无关。需要在AppModule或者对应组件所在的特性模块中导入CommonModule（Angular内置指令基础依赖）、FormsModule（模板驱动表单依赖，提供ngModel功能），如果用到响应式表单还要导入ReactiveFormsModule。
  示例导入代码：

  import { CommonModule } from '@angular/common';
  import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  
  // 加到对应模块的imports数组中
  imports: [CommonModule, FormsModule, ReactiveFormsModule]
  

• Material模块导入不全
  你当前的导入列表缺少报错对应的多个模块：

  • mat-icon对应MatIconModule
  • mat-toolbar对应MatToolbarModule
  • mat-tab对应MatTabsModule
    先补充导入这些缺失的模块即可解决对应组件不识别的报错。另外要确认你本地自定义的./material路径下的MaterialModule是否真的导出了相关模块，如果该文件为空或者导出不全，仅在AppModule导入是无效的。

• 版本不匹配
  Angular Material的大版本必须和Angular核心版本完全一致，比如Angular 15必须对应@angular/material 15.x，版本差1个大版本就会出现组件不识别、属性不支持的问题。
  排查命令：执行ng version查看Angular核心版本，再对比package.json中@angular/material的版本号，确保大版本一致。如果不一致可以执行ng update @angular/material@对应版本号统一版本。

• 特性模块未导入依赖
  如果项目使用了懒加载特性模块，仅在AppModule导入Material模块是无效的，必须在用到这些Material组件的特性模块中，也导入对应的Material模块或者你封装的公共MaterialModule。

• 缓存问题
  可以先清理Angular缓存、删除依赖重新安装再尝试编译：

  ng cache clean
  rm -rf node_modules package-lock.json
  npm install
  ng build
  

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