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.

Answer 1

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!!