How to reference and use a component from another module in Angular?

Question

In my app.component.html I added new tag for a custom component, so it looks as shown below. The application crashes and the error says that the app-main-menu-bar is unrecognized as a part of this module and asks me to verify that it is. Well, it's not but I still want to use it by importing another module.

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

I'm making sure that the menu component is announced to its holder (I've tried both referencing the component itself and also the module where it resides).

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

I also made sure that the menu module is announced to the application module.

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

The component itself is an Angular component with the selector as expected.

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() { }
}

It resides in a module that exports it liek this.

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 { }

I do understand I'm missing something but I can't imagine what.

Sajeetharan · Accepted Answer · 2018-05-10 09:54:02Z

3

you need to add the MainMenuBarComponent unde exports inside NavModule

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

answered May 10, 2018 at 9:54

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DonkeyBanana Over a year ago

Yes, it works, so green check on this. However, I'm confused why I have to do this export whereas I don't when it comes to components in other modules - the ones that I route in. When I set up a router for the navbar, it worked (named router and the default one too). I expected the declaration part to managed that. Or is it like this: when routing, use declarations and when using straight, use exports?

Collectives™ on Stack Overflow

How to reference and use a component from another module in Angular?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related