Angular'is not a known element'报错解决方案，含mat-list场景处理

针对性排查修复步骤 #

• 模块导入正确性校验
  确认在使用mat-list的模块（或共享模块）中正确导入MatListModule，导入路径必须为@angular/material/list，不可从其他次级路径导入。导入示例：

  import { MatListModule } from '@angular/material/list';
  @NgModule({
    imports: [MatListModule],
    exports: [MatListModule] // 共享模块需额外导出供其他模块使用
  })
  export class YourModule {}
  

• Material版本匹配校验
  检查package.json中@angular/material、@angular/cdk的大版本号必须和@angular/core完全一致，Angular 12仅适配12.x.x版本的Material组件库，版本跨级会出现组件解析异常。
• tsconfig配置修正
  打开tsconfig.json确认以下配置：
  • 开启Ivy编译：angularCompilerOptions下配置"enableIvy": true，Angular 12默认开启，手动关闭会导致Material组件无法正常解析
  • 移除paths配置中针对@angular/material的自定义路径映射，避免模块解析指向错误位置
• eslint规则适配
  如果报错为ESLint抛出的「未知元素」类提示，在.eslintrc.json的rules节点添加配置：

  "@angular-eslint/no-unknown-elements": [
    "error",
    { "allowedElements": ["mat-list", "mat-list-item", "mat-list-icon", "mat-list-avatar"] }
  ]
  

• 全量缓存清理
  除删除node_modules文件夹外，同步删除以下文件/文件夹后重新安装依赖：
  • .angular缓存文件夹
  • 项目根目录dist编译产物文件夹
  • package-lock.json或yarn.lock锁文件

长期规避加载策略 #

• 采用分层导入逻辑：通用Material组件统一在共享模块中导入并导出，仅在使用到对应组件的特性模块中引入共享模块，避免重复导入、漏导入问题
• 非懒加载的核心页面使用的Material组件统一在CoreModule中预导入，减少懒加载模块的重复依赖体积，同时避免模块加载时序问题
• 关闭Ivy的partial编译模式，生产编译时使用全量AOT编译，提前校验组件依赖完整性，避免运行时报错

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