Tabview does not work with angular Route Protection or Data Resolvers

[IAMtheIAM]

Which platform(s) does your issue occur on?

tested on android

Please, provide the following version numbers that your issue occurs with:

tns 4.1

Please, tell us how to recreate the issue in as much detail as possible.

Describe the steps to reproduce it.

Is there any code involved?

Using a route guard simply does nothing with a TabView component. The tabs can be freely navigated to as if the route guard did not exist.

Additionally, data resolvers are broke, because TabView loads ALL components at once, as soon as the first tab is loaded, and therefore immediately activates all data resolvers for each route. In the case a data resolver depends on other data already existing like Login data, the resolver fails.

Components should not get activated until that tab view is clicked, and route guards should work.

export const AppRoutes: Routes = [
    {
        /**
         * Nativescript Tabview Syntax - tabname:path
         * See: https://www.nativescriptorg/blog/structuring-your-pages-sidedrawers-and-tabviews-with-nativescript-4.0
         */
        path: '',
        pathMatch: 'full',
        redirectTo: '/(loginTab:login//homeTab:home//myPlanTab:my-plan//studentLifeTab:student-life//directoryTab:directory)'
    },

    {
        path: 'login',
        component: LoginComponent,
        canActivate: [ RouteProtectionLoggedIn ],
        outlet: 'loginTab'
    },

    // home
    {
        path: 'home',
        component: HomeComponent,
        canActivate: [ RouteProtection ],
        outlet: 'homeTab'
    },

    // my-plan
    {
        path: 'my-plan',
        component: MyPlanComponent,
        canActivate: [ RouteProtection ],
        resolve: { resolvedData: MyPlanDataResolver },
        outlet: 'myPlanTab'
    },

    // student-life
    {
        path: 'student-life',
        component: StudentLifeComponent,
        canActivate: [ RouteProtection ],
        outlet: 'studentLifeTab'
    },


    // directory
    {
        path: 'directory',
        component: DirectoryComponent,
        canActivate: [ RouteProtection ],
        outlet: 'directoryTab'
    },


    {
        path: "item/:id",
        component: ItemDetailComponent,
        outlet: "homeTab"
    }
// end `menu` path
]

[yassernasc]

Hi,

I'm passing through this behavior:
When the guard canActivate reject just one tab component, all tabs stay blank and the user can switch between then freely.

Example code:

App Routing:

    { path: "main", component: MainPageComponent, children: [
        { path: 'foo', outlet: 'fooTab', component: FooComponent },
        { path: 'another-tab', outlet: 'anotherTab', component: AnotherTabComponent, canActivate: [ AuthGuard ] },
    ] },

Main Component OnInit:

    ngOnInit() {
        this.routerExtension.navigate([{ outlets: { fooTab: ['foo'], anotherTab: ['another-tab'] } }], { relativeTo: this.activeRoute });
    }

AuthGuard:

    canActivate() {
        return false;
    }