Router outlet in Lazy Loaded module not working for Tab View


#1

Hi, need some help here.
I am trying to set up a TabView with router-outlets in a lazy-loaded module. However, the router-outlets are not working. Here is what I attempted:

In the app-routing.ts file:
import { NgModule } from “@angular/core”;
import { Routes } from “@angular/router”;
import { NativeScriptRouterModule } from “nativescript-angular/router”;
import { LoginComponent } from “./views/login/login.component”;
import { SupervisorModule } from “./views/supervisor/supervisor.module”;
const routes: Routes = [
{ path: “”, redirectTo: “/supervisor”, pathMatch: “full” },
{ path: “login”, component: LoginComponent },
{ path: “supervisor”, loadChildren: “./views/supervisor/supervisor.module#SupervisorModule” },

];

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

In my submodule supervisor.module.ts file:

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";

import { NativeScriptCommonModule } from “nativescript-angular/common”;
< some other standard modules - omitted >

import { SupervisorRoutingModule } from “./supervisor-routing.module”;
import { SupervisorComponent } from “./supervisor.component”;
import { SupervisorTasks } from “./supervisor.tasks.component”;

import { SupervisorPlots } from “./supervisor.plots.component”;

import { SupervisorCrops } from “./supervisor.crops.component”;
@NgModule({
imports: [
NativeScriptUISideDrawerModule,
NativeScriptUIListViewModule,
NativeScriptUICalendarModule,
NativeScriptUIChartModule,
NativeScriptUIDataFormModule,
NativeScriptUIAutoCompleteTextViewModule,
NativeScriptUIGaugeModule,
NativeScriptCommonModule,
SupervisorRoutingModule,
NativeScriptFormsModule,

],
declarations: [
    SupervisorComponent,
    SupervisorTasks,
    SupervisorCrops,
    SupervisorPlots
],
schemas: [
    NO_ERRORS_SCHEMA
]

})
export class SupervisorModule { }

Then, in my submodule supervisor-routing.module.ts file:

import { NgModule } from "@angular/core";
import { Routes } from "@angular/router";

import { NativeScriptRouterModule } from “nativescript-angular/router”;

import { SupervisorComponent } from “./supervisor.component”;
import { SupervisorTasks } from “./supervisor.tasks.component”;

import { SupervisorPlots } from “./supervisor.plots.component”;

import { SupervisorCrops } from “./supervisor.crops.component”;

  export const routes: Routes = [
  {path:"home", 
  redirectTo:"/supervisor/(tasksoutlet:tasks//plotsoutlet:plots//cropsoutlet:crops)",pathMatch:"prefix"}, 
   { 
    path: "" ,component: SupervisorComponent, children:[

        { path: "tasks", outlet: "tasksoutlet" , component:SupervisorTasks},

        { path: "plots", component: SupervisorPlots, outlet: "plotssoutlet" },

        { path: "crops", component: SupervisorCrops, outlet: "cropsoutlet" }
         ]
  }
];

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

My XML:

 <ActionItem>
	<StackLayout>
		<Button text="cart" fontSize="20" (tap)="toggleDrawer()"></Button>
	</StackLayout>
</ActionItem>

<ActionItem>
	<StackLayout>
		<Button class="fa" text="&#xf0c9;" fontSize="20" (tap)="toggleDrawer()"></Button>
	</StackLayout>
</ActionItem>
                <Label text="Hello"></Label>
              <router-outlet  name="tasksoutlet">
               </router-outlet>

                <Label text="Hello"></Label>
                    </StackLayout>
                <StackLayout *tabItem="{title:'Plots'}">

                 <router-outlet name="plotsoutlet"></router-outlet>
                </StackLayout>

               <StackLayout *tabItem="{title:'Crops'}">

                 <router-outlet name="plotsoutlet"></router-outlet>
                </StackLayout>

        </TabView>
  </StackLayout>

So, My understanding is this. When the bootstrapped AppComponent loads, the routing lazy loads my Supervisor.module component. The supervisor routing load the default path “” with children outlets names within each tabitem. The tab-items are working, as I have put labels and they show up. However, the page-outlets are not loading.

How do I get the children to show up?