Nested routing with nested modules

Question

I am working on an Angular 2 app for the first time.

I have routing similar to this -

/home
/projects/
/projects/:id/members
/projects/:id/members/:id/tasks

From all the references, tutorials and articles I could find on the internet. I only found approach similar to this -

[
  {
    path: "home", component: HomeComponent
  },
  {
    path: "", redirectTo: "home", pathMatch: "full"
  },
  {
    path: 'projects', 
    component: ProjectComponent,
    children: [
      {
        path: ':id', 
        component: ProjectDetailsComponent,
        children: [
          { 
            path: 'members', 
            component: MemberComponent, 
            children : [
              {
                path: ':id',
                component : MemberDetailsComponent,
                children : [
                  {
                    path: 'tasks',
                    component : TasksComponent
                  }
                ]
              }
            ] 
          },
        ]
      }
    ]
  }
]

This works well. However, I feel, this is sort of strictly typed approach and can create when there are a lot of components in place.

I have created feature modules called ProjectModule, MemberModule, TaskModule. There will be several more modules under ProjectModule too..

What is the best way to have nested routes in place in such scenario? The lazy loading sort of works but url appears like http://localhost/members/ instead of http://localhost/projects/12/members even though members is under loadChildren.

Madhu Ranjan · Accepted Answer · 2017-01-16 19:52:13Z

17

try below,

Check this Plunker

App Routes

 const appRoutes: Routes = [
  { path: '',   redirectTo: '/home', pathMatch: 'full' },
  { path: 'home',  component: HomeComponent },
  {
    path: 'projects',
    loadChildren: 'app/project.module#ProjectModule'
  }
];

Project Module Routes

const projectRoutes: Routes = [
  { 
     path: '',   
     component: ProjectComponent ,
      children: [
      {
        path: ':id', 
        component: ProjectDetailsComponent,
        children:[
           {
            path: 'members',
            loadChildren: 'app/member.module#MemberModule'
           }  
        ]
      }
    ]
  }
];

Member Module Routes

const memberRoutes: Routes = [
  { 
     path: '',   
     component: MemberComponent,
      children: [
      {
        path: ':id', 
        component: MemberDetailsComponent
      }
    ]
  }
];

Hope this helps!!

edited Jan 16, 2017 at 19:52

answered Dec 27, 2016 at 17:58

Madhu Ranjan

18k7 gold badges65 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Nested routing with nested modules

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related