Angular子模块使用共享模块组件时app-send-email报错怎么解决？

错误原因 #

Angular模块的作用域是独立的，EmailDialogComponent在SharedDialogComponentModule中声明，它的模板中用到的app-send-email组件，必须在SharedDialogComponentModule的可访问范围内——要么是该模块自己声明的组件，要么是该模块导入的其他模块导出的组件。你现在只在DashboardModule中导入了SendEmailComponent，SharedDialogComponentModule完全访问不到这个组件，所以触发了未识别组件的报错。

解决步骤 #

步骤1：先验证组件对应关系 #

检查SendEmailComponent的@Component装饰器配置，确认selector字段的值确实是app-send-email，避免选择器写错的低级错误。

步骤2：按使用场景选择适配方案 #

方案A：SendEmailComponent为全局通用组件

如果多个模块都需要用到这个组件，直接把它归入公共组件模块即可，修改shared-dialog-component.module.ts：

import { NgModule } from '@angular/core';
import { EmailDialogComponent } from '../../dashboard/shared/template/dialog/email-dialog/email-dialog.component';
// 调整为你实际的SendEmailComponent路径
import { SendEmailComponent } from '../../dashboard/shared/send-email.component';

@NgModule({
  declarations: [
    EmailDialogComponent,
    SendEmailComponent // 加入声明
  ],
  entryComponents: [EmailDialogComponent],
  exports: [
    EmailDialogComponent,
    SendEmailComponent // 如果其他模块也需要直接用app-send-email就加导出，否则可以去掉
  ]
})
export class SharedDialogComponentModule {}

方案B：SendEmailComponent仅Dashboard相关模块使用

避免公共模块混入业务组件，你可以单独为SendEmailComponent创建一个小模块：

1. 新建send-email.module.ts

import { NgModule } from '@angular/core';
import { SendEmailComponent } from './send-email.component';

@NgModule({
  declarations: [SendEmailComponent],
  exports: [SendEmailComponent]
})
export class SendEmailModule {}

2. 在SharedDialogComponentModule中导入这个模块：

import { NgModule } from '@angular/core';
import { EmailDialogComponent } from '../../dashboard/shared/template/dialog/email-dialog/email-dialog.component';
// 调整为你实际的SendEmailModule路径
import { SendEmailModule } from '../../dashboard/shared/send-email.module';

@NgModule({
  imports: [SendEmailModule], // 加入导入
  declarations: [EmailDialogComponent],
  entryComponents: [EmailDialogComponent],
  exports: [EmailDialogComponent]
})
export class SharedDialogComponentModule {}

如果DashboardModule里也要直接使用<app-send-email>，记得同步在DashboardModule的imports配置中加入SendEmailModule即可。

注意事项 #

不要为了消错直接加CUSTOM_ELEMENTS_SCHEMA，这个配置是用于兼容自定义Web组件的，添加后会屏蔽所有未识别组件的报错，后续你写错其他组件选择器也不会有提示，属于掩盖问题而不是解决问题。

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