Angular routes, child routes and default routes

Question

I'm trying to use routes with modules...

app.module

  {
      path: '',
      component: AppComponent,
      children: [
          { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
          { path: 'dashboard', loadChildren: 'app/dashboard/dashboard.module#DashboardModule'
      ]
  }

With import RouterModule.forRoot(appRoutes)

dashboard.module

  {
      path: '',
      component: DashboardComponent,
      children: [
          { path: '', redirectTo: 'conta', pathMatch: 'full' },
          { path: 'conta', loadChildren: 'app/dashboard/conta/conta.module#ContaModule' }
      ]
  }

With import RouterModule.forChild(dashboardRoutes)

conta.module

  {
      path: '',
      component: ContaComponent,
      children: [
          { path: '', redirectTo: 'list', pathMatch: 'full' },
          { path: 'list', component: ContaListComponent }
      ]
  }

With import RouterModule.forChild(contaRoutes)

The idea is:

Default route to app is dashboard
Default route to dashboard is conta
Default route to conta is contaList

When i run this code, app is loading App > Conta > ContaList and not App > Dashboard > Conta > ContaList how I wish.

I have inside my templates (App, Dashboard and Conta) a router-outlet.

What am I doing wrong?

Rahul Singh Rahul Singh · Accepted Answer · 2017-06-02T12:17:47

In the dashboard component you need to specify the path as dashboard like and same in conta module

{
      path: 'dashboard',
      component: DashboardComponent,
      children: [
          { path: '', redirectTo: 'conta', pathMatch: 'full' },
          { path: 'conta', loadChildren: 'app/dashboard/conta/conta.module#ContaModule' }
      ]
  }


{
      path: 'conta',
      component: ContaComponent,
      children: [
          { path: '', redirectTo: 'list', pathMatch: 'full' },
          { path: 'list', component: ContaListComponent }
      ]
  }

Angular routes, child routes and default routes

1 Answers