title: Nested routing with nested modules
body: <p>I am working on an Angular 2 app for the first time. </p>
  
  <p>I have routing similar to this - </p>
  
  <pre><code>/home
  /projects/
  /projects/:id/members
  /projects/:id/members/:id/tasks
  </code></pre>
  
  <p>From all the references, tutorials and articles I could find on the internet. I only found approach similar to this - </p>
  
  <pre><code>[
    {
      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
                    }
                  ]
                }
              ] 
            },
          ]
        }
      ]
    }
  ]
  </code></pre>
  
  <p>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.</p>
  
  <p>I have created feature modules called ProjectModule, MemberModule, TaskModule. There will be several more modules under ProjectModule too.. </p>
  
  <p>What is the best way to have nested routes in place in such scenario? The lazy loading sort of works but url appears like <code>http://localhost/members/</code> instead of <code>http://localhost/projects/12/members</code> even though members is under <code>loadChildren</code>.</p>