Page-router-outlet для получения более высокого компонента

Я работаю над угловым проектом нативного скрипта, который использует RadSideDrawer

А вот и мой main-routing.module.ts

import { NgModule } from "@angular/core";
import { Routes } from "@angular/router";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { MainComponent } from "~/app/components/main/main.component";

const routes: Routes = [
  {
    path: "",
    component: MainComponent,
    children: [
      { path: "", redirectTo: "/home", pathMatch: "full" },
      { path: "home", loadChildren: "~/app/components/home/home.module#HomeModule" },
      {
        path: "browse",
        loadChildren: "~/app/components/browse/browse.module#BrowseModule"
      },
      {
        path: "search",
        loadChildren: "~/app/components/search/search.module#SearchModule"
      },
      {
        path: "featured",
        loadChildren: "~/app/components/featured/featured.module#FeaturedModule"
      },
      {
        path: "settings",
        loadChildren: "~/app/components/settings/settings.module#SettingsModule"
      }
    ]
  }
];

@NgModule({
  imports: [NativeScriptRouterModule.forChild(routes)],
  exports: [NativeScriptRouterModule]
})
export class MainRoutingModule {}

вот мой main.component.html

<RadSideDrawer [drawerTransition]="sideDrawerTransition">
    <GridLayout tkDrawerContent rows="auto, *" class="sidedrawer sidedrawer-left">
        <StackLayout row="0" class="sidedrawer-header">
            <Label class="sidedrawer-header-image fa" text="&#xf2bd;"></Label>
            <Label class="sidedrawer-header-brand" text="User Name"></Label>
            <Label class="footnote" text="[email protected]"></Label>
        </StackLayout>

        <ScrollView row="1">
            <StackLayout class="sidedrawer-content">
                <GridLayout columns="auto, *" class="sidedrawer-list-item" [class.selected]="isComponentSelected('/home')"
                    (tap)="onNavItemTap('/home')">
                    <Label col="0" text="&#xf015;" class="fa"></Label>
                    <Label col="1" text="Home" class="p-r-10"></Label>
                </GridLayout>

                <GridLayout columns="auto, *" class="sidedrawer-list-item" [class.selected]="isComponentSelected('/browse')"
                    (tap)="onNavItemTap('/browse')">
                    <Label col="0" text="&#xf1ea;" class="fa"></Label>
                    <Label col="1" text="Browse" class="p-r-10"></Label>
                </GridLayout>

                <GridLayout columns="auto, *" class="sidedrawer-list-item" [class.selected]="isComponentSelected('/search')"
                    (tap)="onNavItemTap('/search')">
                    <Label col="0" text="&#xf002;" class="fa"></Label>
                    <Label col="1" text="Search" class="p-r-10"></Label>
                </GridLayout>

                <GridLayout columns="auto, *" class="sidedrawer-list-item" [class.selected]="isComponentSelected('/featured')"
                    (tap)="onNavItemTap('/featured')">
                    <Label col="0" text="&#xf005;" class="fa"></Label>
                    <Label col="1" text="Featured" class="p-r-10"></Label>
                </GridLayout>

                <StackLayout class="hr-light"></StackLayout>

                <GridLayout columns="auto, *" class="sidedrawer-list-item" [class.selected]="isComponentSelected('/settings')"
                    (tap)="onNavItemTap('/settings')">
                    <Label col="0" text="&#xf013;" class="fa"></Label>
                    <Label col="1" text="Settings" class="p-r-10"></Label>
                </GridLayout>
                <GridLayout columns="auto, *" class="sidedrawer-list-item" (tap)="signOut()">
                    <Label col="0" text="&#xf013;" class="fa"></Label>
                    <Label col="1" text="Signout" class="p-r-10"></Label>
                </GridLayout>
            </StackLayout>
        </ScrollView>
    </GridLayout>
    <page-router-outlet tkMainContent class="page page-content"></page-router-outlet>
</RadSideDrawer>

вот мое приложение-routing.module.ts

import { NgModule } from "@angular/core";
import { Routes } from "@angular/router";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { AuthGuard } from "~/app/shared/services/auth-guard.service";
import { LogGuard } from "~/app/shared/services/log-guard.service";
const routes: Routes = [
  {
    path: "",
    loadChildren: "~/app/components/main/main.module#MainModule",
    canActivate: [AuthGuard]
  },
  {
    path: "login",
    loadChildren: "~/app/components/login/login.module#LoginModule",
    canActivate: [LogGuard]
  },
  {
    path: "register",
    loadChildren: "~/app/components/register/register.module#RegisterModule",
    canActivate: [LogGuard]
  }
];

@NgModule({
  imports: [NativeScriptRouterModule.forRoot(routes)],
  exports: [NativeScriptRouterModule]
})
export class AppRoutingModule {}

а вот мой app.component.html

<app-no-connection></app-no-connection>
<page-router-outlet></page-router-outlet>

а вот мой home.component.html

<ActionBar class="action-bar">
    <NavigationButton ios:visibility="collapsed" icon="res://menu" (tap)="onDrawerButtonTap()"></NavigationButton>
    <ActionItem icon="res://navigation/menu" android:visibility="collapsed" (tap)="onDrawerButtonTap()" ios.position="left">
    </ActionItem>
    <Label class="action-bar-title" text="Home"></Label>
</ActionBar>

<GridLayout class="page page-content">
    <Label class="page-icon fa" text="&#xf015;"></Label>
    <Label class="page-placeholder" text="<!-- Page content goes here -->"></Label>
</GridLayout>

а вот мой home.component.ts

import { Component, OnInit } from "@angular/core";
import { RadSideDrawer } from "nativescript-ui-sidedrawer";
import * as app from "tns-core-modules/application";

@Component({
  selector: "Home",
  moduleId: module.id,
  templateUrl: "./home.component.html"
})
export class HomeComponent implements OnInit {
  constructor() {
    // Use the component constructor to inject providers.
    console.log("ini home");
  }

  ngOnInit(): void {
    // Init your component properties here.
  }

  onDrawerButtonTap(): void {
    console.log("tapped side bar");
    const sideDrawer = <RadSideDrawer>app.getRootView();
    sideDrawer.showDrawer();
  }
}

моего RadSideDrawer нет в app.component.html. Он находится в main.component.html. поэтому в моем app.component.html просто есть <page-router-outlet></page-router-outlet>. Мне это понравилось, потому что мне нужно сначала войти в систему, прежде чем получить MainComponent.

Но. Это не работает. мой RadSideDrawer не показан. И я не понимаю, почему я получаю эту ошибку ERROR TypeError: sideDrawer.showDrawer is not a function, когда я нажимаю ящик на home.component.html Любое предложение, пожалуйста?