How to lazy load in TabView Page Router Outlet?

nativescriptrocks
nativescriptcore
plugins
android
proui

#1

I want to add Lazy loading in my application with tabview for navigation

Structure is as follow

shared module
tabsModule
and tabRoutes
tabs
|
tabs.component.html
tabs.component.ts

and there are two diffreent modules in module directory in app directory
while tabs module in in shared directory and has tabview with page router outlet
and Home and Profile are two modules in Modules directory

in tabs routes i want to lazy load both modules

like

{ path: "", redirectTo: "/(homeTab:home//profileTab:profile)", pathMatch: "full" },
{ path: "home", loadChildren: "modules/home/home.module#HomeModule" , outlet: "homeTab" },
{ path: "profile", loadChildren: "modules/profile/profile.module#ProfileModule" , outlet: "profileTab" },

#2

tabs.component.html

 <TabView (selectedIndexChange)="onIndexChanged($event)" class="tab-icon" selectedIndex="0" 
    iosIconRenderingMode="alwaysTemplate" 
    selectedTabTextColor="blue" 
    androidTabsPosition="bottom" sdkExampleTitle sdkToggleNavButton >
        <page-router-outlet *tabItem="{title: 'Home'}" name="homeTab" >
            <Label text="Home" class="h1" textWrap="true"></Label>            
        </page-router-outlet>
        <page-router-outlet *tabItem="{title: 'Profile' }" name="profileTab">
                <Label text="Profile" textWrap="true"></Label>
        </page-router-outlet>
    </TabView>

#3

Lazy loading named outlets have issues with Angular itself, I guess the next Angular release should fix this.


#4

Below Git code Something related