Using Angular Router to load a component within a component

Question

I'm using the Ionic frame work (v5) and implementing Angular Router to load an app with the following structure.

App

 - Tabs
 -- Tab 1
 -- Tab 2
 -- Tab 3

This is a boilerplate template that you can choose to have Ionic setup for you. So this navigation is working correctly using the Angular Router setup below.

app.module.ts

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule, BrowserAnimationsModule],
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy } //     { provide: HTTP_INTERCEPTORS, useClass: InterceptorService, multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

app-routing.module.ts

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
  }
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

tabs.module.ts

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    TabsPageRoutingModule
  ],
  declarations: [TabsPage]
})
export class TabsPageModule {}

tabs-routing.module.ts

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'tab1',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../tab1/tab1.module').then(m => m.Tab1PageModule)
          }
        ]
      },
      {
        path: 'tab2',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../tab2/tab2.module').then(m => m.Tab2PageModule)
          }
        ]
      },
      {
        path: 'tab3',
        children: [
          {
            path: '',
            loadChildren: () =>
              import('../tab3/tab3.module').then(m => m.Tab3PageModule)
          }
        ]
      },
      {
        path: '',
        redirectTo: '/tabs/tab1',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/tab1',
    pathMatch: 'full'
  }
];

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

What I'm trying to do is introduce a secondary menu within each tab that uses a navigation system similar to Material Tabs https://material.io/components/tabs#. Each tab would load inline a different component. So Tab 1 would remain active and continue to allow the user to tab between section 1, 2 or 3.

App

 - Tabs
 -- Tab 1
 --- Section 1
 --- Section 2
 --- Section 3
 -- Tab 2
 --- Section 1
 --- Section 2
 --- Section 3
 -- Tab 3
 --- Section 1
 --- Section 2
 --- Section 3

This is what I have so far for

tab1.module.ts

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    RouterModule.forChild([{ path: '', component: Tab1Page }]),
    MaterialModule,
    Tab1PageRoutingModule
  ],
  declarations: [Tab1Page]
})
export class Tab1PageModule {}

tab1-routing.module.ts

const routes: Routes = [
  {
    path: 'tab1',
    component: Tab1Page,
    children: [
      {
        path: 'section1',
        children: [
          {
            path: '',
            loadChildren: () =>
            import('../pages/dashboard/dashboard.module').then(m => m.DashboardPageModule)
          }
        ]             
      },
      {
        path: 'section2',
        children: [
          {
            path: '',
            loadChildren: () =>
            import('../pages/dashboard/dashboard.module').then(m => m.DashboardPageModule)
          }
        ]     
      },
      {
        path: 'section3',
        children: [
          {
            path: '',
            loadChildren: () =>
            import('../pages/dashboard/dashboard.module').then(m => m.DashboardPageModule)
          }
        ]     
      },
      {
        path: '',
        redirectTo: '/tabs/tab1/section1',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/tab1/section1',
    pathMatch: 'full'
  }
];

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

But when I try to navigate to /section1 from the /tabs/tab1 route it presents the error message

Error: Cannot match any routes. URL Segment: 'section1'

alexortizl alexortizl · Accepted Answer · 2020-04-20T19:56:19

You already have a tab1 route in tabs-routing.module.ts and in tab1-routing.module.ts you're again declaring a tab1 route with a section1 children. So right now what you really have is tabs/tab1/tab1/section1. Then in tab1-routing.module.ts you are redirecting from '' to /tabs/tab1/section1 which doesn't exists. You need to change the '' route redirect in tab1-routing.module.ts to:

{
  path: '',
  redirectTo: '/tabs/tab1/tab1/section1',
  pathMatch: 'full'
}

Also note that in tab1.module.ts you are importing two router modules. That could led to some weird results.

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    RouterModule.forChild([{ path: '', component: Tab1Page }]), //<- here
    MaterialModule,
    Tab1PageRoutingModule // <- and here
  ],
  declarations: [Tab1Page]
})
export class Tab1PageModule {}

Using Angular Router to load a component within a component

1 Answers