跨模块调用Angular组件失败，构建报错NG8001与NG8002

问题详情 #

共享模块配置 #

exports: [
  PatientClinicalTabComponent
],

组件包含patientId输出属性（EventEmitter）

导入配置 #

imports: [
  PatientModule
]

模板代码 #

<ng-template ngbNavContent>
  <app-patient-clinical-tab [patientId]='patientId'>
  </app-patient-clinical-tab>
</ng-template>

构建错误 #

错误1 #

projects/order/src/app/order-create-edit-tab/order-create-edit-tab.component.html:149:11 - error NG8001: 'app-patient-clinical-tab' is not a known element:

1. 若'app-patient-clinical-tab'是Angular组件，请确认它属于当前模块。
2. 若'app-patient-clinical-tab'是Web组件，请将'CUSTOM_ELEMENTS_SCHEMA'添加到该组件的'@NgModule.schemas'以屏蔽此提示。
   错误出现在OrderCreateEditTabComponent的模板中。

错误2 #

projects/order/src/app/order-create-edit-tab/order-create-edit-tab.component.html:149:37 - error NG8002: Can't bind to 'patientId' since it isn't a known property of 'app-patient-clinical-tab'.

1. 若'app-patient-clinical-tab'是Angular组件且包含'patientId'输入属性，请确认它属于当前模块。
2. 若'app-patient-clinical-tab'是Web组件，请将'CUSTOM_ELEMENTS_SCHEMA'添加到该组件的'@NgModule.schemas'以屏蔽此提示。
3. 若要允许任意属性，请将'NO_ERRORS_SCHEMA'添加到该组件的'@NgModule.schemas'。
   错误出现在OrderCreateEditTabComponent的模板中。

解决步骤 #

1. 验证模块导出与导入链路

   • 确认PatientModule的exports数组中确实包含PatientClinicalTabComponent，只有导出的组件才能被其他模块引用。
   • 检查使用该组件的模块（如OrderCreateEditTabModule）是否正确导入了PatientModule，惰性加载模块需单独导入共享模块。

2. 修正属性绑定错误

   • 组件中patientId是输出属性（EventEmitter），但模板误用了输入绑定语法[patientId]：
     • 若要监听输出事件，改为事件绑定：

       <app-patient-clinical-tab (patientId)="handlePatientIdEmit($event)">
       </app-patient-clinical-tab>
       

     • 若需传入patientId作为输入，需在PatientClinicalTabComponent中添加@Input()装饰器：

       import { Input } from '@angular/core';
       
       @Input() patientId: number; // 替换为实际业务类型
       

3. 避免临时屏蔽方案

   • 不要随意添加CUSTOM_ELEMENTS_SCHEMA或NO_ERRORS_SCHEMA，这会掩盖真实的模块配置或绑定错误，仅在确认是Web组件场景下考虑使用。

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