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

Question

Я в настоящее время промочаю ноги с небольшой структурой приложения Angular 6 следующим образом:

(shared.module.ts)

import { NgModule } from '@angular/core';
import { MainMenuComponent } from './main-menu/main-menu.component';
import { MainRoutingModule } from './main-routing/main-routing.module';
import { RouterModule } from '@angular/router';

@NgModule({
  exports: [
    MainRoutingModule,
    MainMenuComponent
  ],
  declarations: [MainMenuComponent]
})
export class SharedModule { }

(app.module.ts)

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { SharedModule } from './shared/shared.module';
import { HolidaysModule } from './holidays/holidays.module';
import { AdminModule } from './admin/admin.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    SharedModule,
    HolidaysModule,
    AdminModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

(app.component.html)

<div class="content">
  <app-main-menu></app-main-menu>
  <router-outlet></router-outlet>
  test
</div>

есть main-menu.component.html, который просто содержит ссылку

<a routerLink="/holidays">Home</a>

Проблема: - при этой структуре отображается «меню» (в основном одинокая ссылка), маршрутизация работает (MainRoutingModule содержит только некоторые маршруты), за исключением того факта, что ссылки отображаются как таковые (например, routerLink didn 'трансформировать элемент в интерактивную ссылку).- если я переместу компонент главного меню в app.module.ts, то он будет отображен, как и ожидалось.

РЕДАКТИРОВАТЬ: добавлен код главного меню

<nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item">
              <a class="nav-link" routerLink="/holidays" routerLinkActive="active">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" routerLink="/admin" routerLinkActive="active">Admin</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropdown
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="#">Disabled</a>
            </li>
          </ul>
          <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
          </form>
        </div>
      </nav>

Компонент:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-main-menu',
  templateUrl: './main-menu.component.html',
  styleUrls: ['./main-menu.component.css']
})
export class MainMenuComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
}

Answer 1

Каждый раз, когда вы импортируете общий модуль в модуль, вы должны экспортировать любые компоненты, модули, директивы или услуги, к которым вы хотите получить доступ.

import { NgModule } from '@angular/core';
import { MainMenuComponent } from './main-menu/main-menu.component';
import { MainRoutingModule } from './main-routing/main-routing.module';
import { RouterModule } from '@angular/router';

@NgModule({
  exports: [
    MainRoutingModule,
    MainMenuComponent
  ],
  declarations: [MainMenuComponent],
  ///***HERE***
  exports: [MainMenuComponent]
})
export class SharedModule { }