Общий компонент Angular в приложении nativescript, не отображается

Question

У меня есть компонент BottomNavigation, который должен отображаться в 3 других компонентах: OrderComponent, UserAreaComponent и компонент Locations.

Я реализую компонент следующим образом:

<ActionBar class="action-bar">
    <Label class="action-bar-title" text="My Yooji's"></Label>
</ActionBar>
<GridLayout class="page p-t-15" rows="*,60">
    <ScrollView row="0">
        <Label text="MyYooji's Area"></Label>
    </ScrollView>
    <StackLayout row="1" orientation="horizontal">
        <bottom-navigation></bottom-navigation>            <---- HERE
    </StackLayout>
</GridLayout>

BottomNavigationКомпонент импортируется в app.module.ts @NgModule в соответствии с декларациями:

@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        NativeScriptModule,
        AppRoutingModule,
        HttpClientModule
    ],
    providers: [
        ApiService,
        UserService,
        AuthGuard,
        {
            provide: HTTP_INTERCEPTORS,
            useClass: AuthInterceptor,
            multi: true
        }
    ],
    declarations: [
        AppComponent,
        BottomNavigationComponent       <---- DECLARED
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})

Как и то, объект не отображается.

Как правильно сделать компонент BottomNavigation глобально доступным в других компонентах?

Добавление: если я импортирую BottomNavigationComponent в массиве объявлений, например, порядка.module.ts компонента Order, нижняя навигация отображается в компоненте Order.Но, как это, нижняя навигация недоступна в других компонентах, кроме компонента заказа ...

bottom-navigation.component.ts:

import { Component, OnInit } from "@angular/core";
import { Router } from "@angular/router";

@Component({
  moduleId: module.id,
  selector: "bottom-navigation",
  templateUrl: "./bottom-navigation.component.html",
  styleUrls: ["./bottom-navigation.component.scss"]
})
export class BottomNavigationComponent implements OnInit {

  navItems = [
    {id: 1, name: "My Yooji's", targetUrl: "myyoojis", img: "myyoojis24.png"},
    {id: 2, name: "Order", targetUrl: "order", img: "order24.png"},
    {id: 3, name: "Locations", targetUrl: "locations", img: "locations24.png"}
  ];
  activeNavItemId: any;

  constructor(
    private router: Router
  ) { }

  ngOnInit() {
    // console.log(this.activeNavItem);
   }

  onNavItemTap(navItem) {
    this.router.navigateByUrl(navItem.targetUrl);
  }

}

Answer 1

Просто поместив BottomNavigationModule в импорт @NgModules вместо объявлений, добился цели.

imports: [
    // other imports removed
    BottomNavigationModule
]

Answer 2

если вы используете ленивые загрузочные модули, вам придется импортировать 'BottomNavigation' в каждый модуль, который вы хотите использовать.