title: Angular Routing Lazy Load Children's Children
body: <p>I am currently stuck on how Angular Routing works and need some help. Basically in my project, I have one core module which used for loading the all the root routes, the home is following:</p>
  
  <pre><code>const routes: Routes = [
    {path: '', redirectTo: '/login', pathMatch: 'full'},
    {path: 'user', loadChildren: 'app/userManagement#UserModule', pathMatch: 'full',canActivate: [AuthGaurd] },
    {path: '**', component: PageNotFoundComponent}
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
  
  
  export class AppRoutingModule {}
  </code></pre>
  
  <p>And in app/userManagement folder I have an index.ts used for imports and declare all the modules:</p>
  
  <pre><code>@NgModule({
    imports: [
      SharedModule,
      UserManagementRoutingModule
    ],
    declarations: [UserHomeComponent, UserListComponent, UserDetailsComponent]
  })
  export class UserModule {
  }
  </code></pre>
  
  <p>And my child routing put inside of the UserManagementRoutingModule:</p>
  
  <pre><code>const routes: Routes = [
    {
      path: '',
      component: UserHomeComponent,
    },
    {
      path: 'userDetails',
      component: UserDetailsComponent
    }
  ];
  
  @NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
  })
  export class UserManagementRoutingModule {
  }
  </code></pre>
  
  <p>In this way when I go to <a href="http://hostname/user" rel="noreferrer">http://hostname/user</a> it will direct to my UserHomeComponent component, however if i go to <a href="http://hostname/user/userDetails" rel="noreferrer">http://hostname/user/userDetails</a> Angular didn't redirect to that page. How should I edit my code so that I can access the userDetailsComponent?</p>
  
  <p>Thanks</p>