My tabbed view only reloads when I try to navigate to a route within it, and doesn't navigate to the intended route

@sadelbrid wrote:

My app has a tabbed view with three tabs, and the first tab has a ‘subroute’ inside of it that can be navigated to. The tabbed view isn’t the root page. When I navigate to the tabbed view, all three tabs work correctly. However when I try to navigate to the subview within the first tab, it reloads the entire tabbed view and doesn’t navigate to the subview - though it runs the constructor/ngOnInit of the subview . When I try a second time in a row, it navigates to the subview, but doesn’t run the constructor or ngOnInit.

Here is my app-routing.module.ts:

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { Config } from './util/Config';

const routes: Routes = [
  { path: '', redirectTo: Config.STAND_ALONE ? 'tabbed-event' : 'login', pathMatch: 'full' },
  { path: 'tabbed-event', loadChildren: './tabbed-event/tabbed-event.module#TabbedEventPageModule' },
  { path: 'login', loadChildren: './login/login.module#LoginPageModule' },
  { path: 'landing', loadChildren: './landing/landing.module#LandingPageModule' },
  { path: 'inspect-athlete', loadChildren: './landing/landing.module#LandingPageModule' },
  { path: 'landing-popover', loadChildren: './landing-popover/landing-popover.module#LandingPopoverPageModule' },
  { path: 'routine', loadChildren: './routine/routine.module#RoutinePageModule' },
  { path: 'routine/tabbed-event', loadChildren: './tabbed-event/tabbed-event.module#TabbedEventPageModule' },

  { path: 'add-team-modal', loadChildren: './add-team-modal/add-team-modal.module#AddTeamModalPageModule' },


  { path: 'landing/team', loadChildren: './team/team.module#TeamPageModule' },
  { path: 'landing/edit-profile', loadChildren: './edit-profile/edit-profile.module#EditProfilePageModule' },
  { path: 'element-groups', loadChildren: './element-groups/element-groups.module#ElementGroupsPageModule' },
  { path: 'event-search', loadChildren: './event-search/event-search.module#EventSearchPageModule' },
  { path: 'favorites', loadChildren: './favorites/favorites.module#FavoritesPageModule' },


  { path: 'inspect-element-modal', loadChildren: './inspect-element-modal/inspect-element-modal.module#InspectElementModalPageModule' },
  { path: 'email-athlete-report-modal', loadChildren: './email-athlete-report-modal/email-athlete-report-modal.module#EmailAthleteReportModalPageModule' },
  // { path: 'element-list', loadChildren: './element-list/element-list.module#ElementListPageModule' },
  { path: 'tabbed-event/about', loadChildren: './about/about.module#AboutPageModule' },
  { path: 'pommel-upgrade-options-modal', loadChildren: './pommel-upgrade-options-modal/pommel-upgrade-options-modal.module#PommelUpgradeOptionsModalPageModule' },
  { path: 'warning-popover', loadChildren: './warning-popover/warning-popover.module#WarningPopoverPageModule' },
  { path: 'pommel-flop-creator-modal', loadChildren: './pommel-flop-creator-modal/pommel-flop-creator-modal.module#PommelFlopCreatorModalPageModule' },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, 
      // { preloadingStrategy: PreloadAllModules }
      )
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

And here is my tabbed-event.module.ts (where the routes are defined for my tabbed view):

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { TabbedEventPage } from './tabbed-event.page';
import { Config } from '../util/Config';

const routes: Routes = [
  {
    path: 'tabs',
    component: TabbedEventPage,
    children: [
      {
        path: 'elementGroupTab', 
        loadChildren: '../element-groups/element-groups.module#ElementGroupsPageModule'
      },
      { path: 'elementGroupTab/element-list', loadChildren: '../element-list/element-list.module#ElementListPageModule' },
      {
        path: 'searchTab', 
        loadChildren: '../event-search/event-search.module#EventSearchPageModule'
      },
      {
        path: 'favoritesTab', 
        loadChildren: '../favorites/favorites.module#FavoritesPageModule'
      },
      {
        path: '',
        redirectTo: '/tabs/elementGroupTab',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/routine/tabbed-event/tabs/elementGroupTab',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [TabbedEventPage]
})
export class TabbedEventPageModule {}

As you can see I have three tabs: elementGroupTab, searchTab, and favoritesTab. elementGroupTab has a subroute defined called elementGroupTab/element-list, which is the page that takes two attempts to navigate to, but still doesn’t run ngOnInit at the proper time.

The list of steps it takes to get to the tabbed view is this:
landing -> routine -> routine/tabbed-event/tabs/elementGroups

1. From the landing page, I run this.navCtrl.navigateForward('routine', extras) to get to ‘routine’.
2. From the routine page, I run this.navCtrl.navigateForward('routine/tabbed-event/tabs/elementGroupTab', extras). At this point I am on the first tab of the tabbed page.
3. When I try to navigate with this.navCtrl.navigateForward('/routine/tabbed-event/tabs/elementGroupTab/element-list', extras), it simply reloads the tabbed page and I’m not navigated anywhere. However I see from my logs that it runs the constructor and ngOnInit of the element-list page. When I try again, it works but the constructor and ngOnInit doesn’t run on my element-list page.

So I want to be able to navigate to the subview on the first attempt, without the entire tabbed page being reloaded. I think there might be some redirects happening that could be causing this but I’m new to routes so I’m not sure. Also for those that don’t like my using navCtrl.navigateForward, I read that it’s using the angular router internally and serves as a shorthand for a forward-animated navigation to the specified route.

Posts: 1

Participants: 1

Read full topic