如何解决微前端Shell应用加载子微应用时抛出'非已知元素'报错

相关配置参考 #

• 图1：
• 图2：
• 图3：
• 图4：
• 图5：
• 图6：
• 图7：

排查&解决步骤 #

• 确认Angular Material版本兼容性：Angular Material v14及以上版本对Chip组件做了破坏性重构，原mat-chip-list指令已废弃，替换为mat-chip-grid/mat-chip-set。如果你使用的是v14+版本的Material，要么调整模板中对应标签写法，要么导入兼容版本的Chips模块。
• 调整微前端共享依赖配置（修改webpack.config.js）：NX微应用架构下需要在模块联邦配置的shared字段中添加@angular/material/chips规则，标记为单例共享，避免父子应用分别加载独立的Material实例导致组件不识别，参考配置如下：

// webpack.config.js 中module federation的shared配置新增
shared: share({
  '@angular/material/chips': {
    singleton: true,
    strictVersion: false,
    requiredVersion: 'auto'
  },
  // 其余原有共享配置保持不变
})

• 校验模块导入链路完整性：
  1. 确认公共Material模块已正确导入MatChipsModule且对外导出
  2. 确认SharedModule已导入公共Material模块，且将MatChipsModule加入导出列表
  3. 确认Shell应用和用到Chip组件的微应用，都已导入SharedModule或直接导入MatChipsModule
• 适配独立组件规则：如果项目使用Angular 14+的独立组件（Standalone Component），需要在用到mat-chip-list的组件的imports数组中显式引入MatChipsModule，仅模块级导入不会生效。
• NX配置校验：如果上述配置都正确仍报错，检查project.json对应Shell应用的构建配置，确认build选项中没有排除@angular/material相关包的打包，也没有开启不兼容的摇树优化规则。

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