Как ссылаться и использовать компонент из другого модуля в Angular?

Question

В моем app.component.html я добавил новый тег для пользовательского компонента, чтобы он выглядел так, как показано ниже.Приложение вылетает, и ошибка говорит о том, что app-main-menu-bar не распознается как часть этого модуля, и просит меня проверить, что это так.Ну, это не так, но я все еще хочу использовать его, импортируя другой модуль.

<div>
  <app-main-menu-bar></app-main-menu-bar>
  <router-outlet></router-outlet>
</div>

Я проверяю, объявлен ли компонент меню его владельцу (я пробовал ссылаться на сам компонент итакже модуль, в котором он находится).

import { MainMenuBarComponent } from "./nav/nav.module";
// import { MainMenuBarComponent } from "./nav/main-menu-bar/main-menu-bar.component";

Я также удостоверился, что модуль меню объявлен прикладному модулю.

import { NavModule } from "./nav/nav.module";
import { AppComponent } from "./app.component";
...
@NgModule({
  declarations: [AppComponent],
  imports: [NavModule, ...],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Сам компонент является угловым компонентом сселектор, как и ожидалось.

import { Component, OnInit } from "@angular/core";
@Component({
  selector: "app-main-menu-bar",
  templateUrl: "./main-menu-bar.component.html",
  styleUrls: ["./main-menu-bar.component.scss"]
})
export class MainMenuBarComponent implements OnInit {
  constructor() { }
  ngOnInit() { }
}

Он находится в модуле, который экспортирует его, вот так.

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

export { MainMenuBarComponent } from "./main-menu-bar/main-menu-bar.component";

@NgModule({
  imports: [CommonModule],
  declarations: [MainMenuBarComponent]
})
export class NavModule { }

Я понимаю, что что-то упустил, но не могу вообразить, что.

Answer 1

вам нужно добавить MainMenuBarComponent отменить экспорт внутри NavModule

@NgModule({
  imports: [CommonModule],
  declarations: [MainMenuBarComponent],
  exports : [MainMenuBarComponent]
})