Angular导入SharedModule后，app-nav组件为何仍不被识别？

你碰到的NG8001: 'app-nav' is not a known element错误，根源很清晰——你的SharedModule虽然声明了NavComponent，但没有将它导出给其他模块使用。

问题原因 #

Angular的模块默认是“封装”状态的：模块内declarations数组里的组件、指令、管道，只能在该模块内部的组件模板中使用。当你把SharedModule导入AppModule时，只有SharedModule的exports数组里的成员，才会被暴露给AppModule，让AppComponent这类外部组件能访问到。

修复步骤 #

修改你的SharedModule，添加exports数组并包含NavComponent：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NavComponent } from './nav/nav.component';

@NgModule({
  declarations: [NavComponent],
  imports: [ CommonModule ],
  exports: [NavComponent] // 关键：把组件导出，让其他模块能使用
})
export class SharedModule { }

验证修复 #

1. 保存修改后的代码
2. 如果热重载没自动生效，重启Angular开发服务器（执行ng serve）
3. 此时app.component.html里的<app-nav></app-nav>应该能正常识别并渲染了

额外排查点（如果修复后仍有问题） #

• 确认SharedModule的导入路径在AppModule里是正确的，没有拼写错误
• 检查NavComponent的选择器app-nav是否和模板里的使用完全一致（大小写、符号都要匹配）

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