CODEWITHSUNDEEP
angularangular-routingangular-router
nethra gowda
nethra gowda

Reputation: 310

loadchildren in different routing module

i have been trying again with too many methods and stuck up with new scenario

below is my app.module.ts

export const ROUTES: Routes=[
    { 
      path: '', component: LoginComponent},
    { 
      path: 'maincontent', 
      loadChildren: './main-content/maincontent.module#MainContentModule'
    }]

below is my maincontent.module.ts

export const ROUTES: Routes = [
  {
    path: 'maincontent',
    component: MainContentComponent,
    children: [
      { path: 'dashboard', 
        loadChildren: './dashboard/dashboard.module#DashboardModule' },
    ] 
      }];

In dashboard.module.ts i have the following routes

export const ROUTES: Routes = [
  {
    path:'dashboard', component:DashboardComponent,
    children:[
      {
        path:'application',component:ApplicationDetailsComponent
      }
    ]
  }
]

The problem is when i login i have navigated directly to the dashboard page and it doesn't show any contents of the page . Where am i going wrong can anyone guide me please

Upvotes: 0

Views: 484

Answers (2)

christo8989
christo8989

Reputation: 6826

I was going through something similar but it turns out, I was missing a dependency...

In your case, @yurzui answer looks right.

Upvotes: 1

yurzui
yurzui

Reputation: 214295

I think you should make path for child routes as empty string

maincontent.module.ts

export const ROUTES: Routes = [
  {
    path: '', // instead of path: 'maincontent',
    component: MainContentComponent,
    children: [
      {
        path: 'dashboard',
        loadChildren: './dashboard/dashboard.module#DashboardModule'
      },
    ]
  }];

dashboard.module.ts

export const ROUTES: Routes = [
  {
    path: '', // instead of path: 'dashboard'
    component: DashboardComponent,
    children: [
      {
        path: 'application', component: ApplicationDetailsComponent
      }
    ]
  }
]

Plunker Example

Upvotes: 0

Related Questions