Angular跨模块引用组件报错：app-main-menu-bar未被识别如何解决？

我一眼就发现问题所在了——你的NavModule没有把MainMenuBarComponent添加到exports数组中！

在Angular里，模块中声明的组件默认是模块私有资源，只有显式添加到模块的exports数组里，其他导入该模块的模块（比如你的AppModule）才能使用这些组件。

修正你的NavModule代码 #

把MainMenuBarComponent加入到@NgModule的exports数组中：

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { MainMenuBarComponent } from "./main-menu-bar/main-menu-bar.component";

@NgModule({
  imports: [CommonModule],
  declarations: [MainMenuBarComponent],
  exports: [MainMenuBarComponent] // 新增这一行！
})
export class NavModule { }

额外提示 #

你不需要在AppComponent的ts文件里直接importMainMenuBarComponent，只要确保AppModule已经导入了NavModule，就可以直接在模板里使用<app-main-menu-bar>标签了。

现在重新运行你的应用，这个错误应该就会消失啦！

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