Angular 4报错：‘app-message-menu’不是已知元素，子组件引入求助

别着急，你已经做了基础配置但还是碰到模板解析错误，咱们一步步排查可能的遗漏点：

1. 确认组件选择器完全匹配 #

先打开message-menu.component.ts，检查组件元数据里的selector是不是和你在header-navbar模板里用的app-message-menu完全一致，比如：

@Component({
  selector: 'app-message-menu', // 这里的内容要和模板标签100%匹配
  templateUrl: './message-menu.component.html',
  styleUrls: ['./message-menu.component.css']
})

如果selector是别的（比如app-message），那模板里的标签也要对应修改。

2. 检查模块的作用域问题 #

你提到在app.module.ts里配置了declarations、exports和imports，但要注意：

• 组件只能在一个模块的declarations数组里声明，别不小心在其他模块重复声明，会导致冲突。
• 如果header-navbar是在某个特性模块（不是根模块app.module）里，那你有两个选择：
  • 把MessageMenuComponent放到一个共享模块里，然后在特性模块中导入这个共享模块；
  • 直接在特性模块的declarations和exports里添加MessageMenuComponent（仅限这个特性模块内部使用的情况）。

举个共享模块的示例：

// shared.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MessageMenuComponent } from './message-menu/message-menu.component';

@NgModule({
  declarations: [MessageMenuComponent],
  exports: [MessageMenuComponent], // 导出才能让其他模块使用
  imports: [CommonModule]
})
export class SharedModule { }

然后在header-navbar所在的特性模块里导入共享模块：

import { SharedModule } from '../shared/shared.module';

@NgModule({
  imports: [
    CommonModule,
    SharedModule // 加入这个模块
  ],
  declarations: [HeaderNavbarComponent]
})
export class HeaderModule { }

3. 确保组件类正确导出 #

检查message-menu.component.ts里的组件类有没有用export关键字导出：

export class MessageMenuComponent { // 必须有export，否则模块无法识别
  // 组件逻辑代码
}

4. 重启Angular开发服务器 #

有时候缓存会导致配置不生效，试试停止当前的ng serve命令，重新启动服务器，让新的模块配置加载生效。

5. 排查模板拼写错误 #

仔细检查header-navbar.component.html里的标签，有没有拼写失误？比如把app-message-menu写成app-mesage-menu（少了字母s），或者大小写不匹配（虽然模板里习惯用小写短横线，但必须和selector完全一致）。

按照上面的步骤排查下来，应该就能解决这个问题啦！

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