Angular使用组件报非已知属性错误、页面空白无显示如何解决

1. 组件识别失败的直接原因：你要用到的app-ifa-button-bar-item、app-machine-detail两个组件分别属于IfaButtonModule、MachineModule，但你父组件所属的CoreModule的imports数组中没有导入这两个模块，Angular无法识别组件的输入输出属性，因此抛出绑定错误、页面白屏。而select-machine所属的MbSMModule明确导入了这两个模块，所以可以正常使用。
2. 导入触发死循环的核心原因：当前IfaButtonModule的imports数组中已经导入了CoreModule，如果再在CoreModule中导入IfaButtonModule，就会形成双向循环依赖，触发编译异常。

步骤1：拆解循环依赖 #

优先处理两个模块的互相引用问题：

• 先检查IfaButtonModule导入CoreModule的用途：如果仅用到CoreModule引入的公共依赖（如MatButtonModule、TranslateModule等），直接将这些公共依赖添加到IfaButtonModule的imports数组中，删除IfaButtonModule对CoreModule的导入即可。
• 如果IfaButtonModule确实需要用到CoreModule导出的业务组件（如TakePhotoComponent、ConfirmationDialogComponent等），则将两个模块共同依赖的组件、服务抽成独立的SharedModule，CoreModule和IfaButtonModule都导入SharedModule，不再互相引用。

步骤2：CoreModule导入依赖模块 #

循环依赖问题解决后，在CoreModule的imports数组中添加两个所需模块即可：

imports: [
  // 原有导入保留
  IfaButtonModule,
  MachineModule // app-machine-detail所属的模块，确认模块名后替换
]

临时应急方案（不推荐长期使用） #

如果需要紧急跑通流程，可以暂时在CoreModule的@NgModule配置中添加schema配置屏蔽报错：

@NgModule({
  // 原有配置保留
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

该方案仅跳过组件属性校验，不会解决根本问题，后续仍需处理循环依赖。

内容的提问来源于stack exchange，提问作者Sini.py