Проблема маршрута Nativescript TabView

Question

Я изучаю NativeScript на примере кода торговой площадки NativeScript здесь . Я пытаюсь создать TabView с пользовательскими вкладками ниже, но я думаю, что я застрял с конфигурацией маршрутизатора. Мой home.component.html контент не будет отображаться во вкладке, он всегда будет отображаться пустым. Любая идея, почему?

У меня есть следующие файлы:

• main.component.html
• home.component.html
• profile.component.html

В моем app-routing.module.ts:

export const routes: Routes = [
    { 
        path: "", 
        redirectTo: "/main/(homeOutlet:home//profileOutlet:profile)", 
        pathMatch: "full" 
    },
    {
        path: "main",
        component: MainComponent,
        runGuardsAndResolvers: 'always',
        canActivate: [AuthGuard],
        children: [
            { path: "home", component: HomeComponent, outlet: "homeOutlet"},
            { path: "profile", component: ProfileComponent, outlet: "profileOutlet"}
        ]

    }
];

main.component.html:

<!-- https://docs.nativescript.org/angular/core-concepts/angular-navigation.html#page-router-outlet -->
<GridLayout columns="*, *, *" rows="*, *, auto, auto" class="page" >

  <TabView col="0" row="0" colSpan="3" rowSpan="2" [(ngModel)]="tabIndex"
      width="100%" androidTabsPosition="bottom" (loaded)="onTabViewLoaded($event)">

      <page-router-outlet *tabItem="{title: 'profile'}" name="profileOutlet">
      </page-router-outlet>
      <page-router-outlet *tabItem="{title: 'home'}" name="homeOutlet">
      </page-router-outlet>

  </TabView>

  <android>
      <StackLayout col="0" row="2" colSpan="3" class="bottom-bar-background"
          verticalAlignment="bottom"></StackLayout>
  </android>

  <GridLayout col="0" row="2" height="48" class="bottom-bar-btn" (tap)="changeTabIndex(0)">
      <Image [src]="getIconSource('profile', 0)" class="image"
          verticalAlignment="center" (loaded)="onFavIconLoaded($event)"></Image>
  </GridLayout>

  <android>
      <StackLayout col="1" row="2" rowSpan="2" class="btn-square btn-cta m-b-20 over"
          (tap)="changeTabIndex(1)">
          <GridLayout class="btn-cta-background" [class.active]="tabIndex === 1"
              borderRadius="12">
              <Image [src]="getIconSource('portalest', 1)" class="image"></Image>
          </GridLayout>
      </StackLayout>
  </android>

  <GridLayout col="2" row="2" height="48" class="bottom-bar-btn" (tap)="changeTabIndex(2)">
      <Image [src]="getIconSource('notification', 2)" class="image"
          verticalAlignment="center"></Image>
  </GridLayout>
</GridLayout>

main.component. ts:

export class MainComponent implements OnInit {

   tabIndex: number = 1;

    private _favIcon: Image;
    private _backToNormalAnimationTimeout;
    private _favItemsLength = 0;
    private _nativeTabsDisabled: boolean = false;

    constructor() {}

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

    ngOnDestroy(): void {
    }

    onTabViewLoaded(args: EventData): void {
        const tabView = <TabView>args.object;
        if (!this._nativeTabsDisabled) {
            if (tabView) {
                if (tabView.android) {
                    tabView.android.removeViewAt(1);
                } else {
                    tabView.ios.tabBar.hidden = true;
                }
            }
            this._nativeTabsDisabled = true;
        }
    }

    onFavIconLoaded(args: EventData) {
        this._favIcon = <Image>args.object;
    }

    changeTabIndex(index: number) {
        try {
            if (isAndroid) {
                ad.dismissSoftInput();
            } else {
                UIApplication.sharedApplication.keyWindow.endEditing(true);
            }
        } catch (e) {
            console.error(e);
        }
        if (index == 2) {
            alert('No content here :( Check out favorites list! Don\'t miss items details.');
        } else {
            this.tabIndex = index;
        }
    }

    getIconSource(icon: string, tabIndex: number): string {
        const iconPrefix = "~/app/images/";
        const iconSuffix = tabIndex === this.tabIndex ? ".png" : "_o.png";
        if (this._backToNormalAnimationTimeout && this.tabIndex === 0) {
            clearTimeout(this._backToNormalAnimationTimeout);
            this._backToNormalAnimationTimeout = null;
            this._favIcon.opacity = 1;
            this._favIcon.scaleX = 1;
            this._favIcon.scaleY = 1;
        }
        return iconPrefix + icon + iconSuffix;
    }

}