title: Angular 2 how to define lazy loaded child routes of a parent route that's also lazy loaded
body: <p>I'm trying to get lazy loading to work for my app but it's one issue after another. I've gotten the main route to lazy load which is <code>/admin</code>, now I want to add another route which is <code>/admin/login</code>. </p>
  
  <p>So I did this:</p>
  
  <p><strong>admin-router.module.ts</strong></p>
  
  <pre><code>@NgModule({
    imports: [
      ComponentsModule,
      SharedModule,
      RouterModule.forChild([
        {
          path: '',
          component: AdminAreaComponent,
          children: [
            {
              path: 'login',
              loadChildren: 'app/+admin-area/pages/login/login.module#LoginModule'
            }
          ]
        }
      ])
    ],
    exports: [
      RouterModule
    ],
    declarations: [
      AdminAreaComponent
    ]
  })
  export class AdminAreaRouterModule {}
  </code></pre>
  
  <p><strong>login-router.module.ts</strong></p>
  
  <pre><code>import {NgModule} from '@angular/core';
  import {RouterModule, Routes} from '@angular/router';
  
  // Global modules
  import {ComponentsModule, SharedModule} from '../../shared';
  
  // Components
  import {LoginComponent} from '../login.component';
  
  @NgModule({
    imports: [
      ComponentsModule,
      SharedModule,
      RouterModule.forChild([
        {
          path: '',
          component: LoginComponent
        }
      ])
    ],
    exports: [
      RouterModule
    ],
    declarations: [
      LoginComponent
    ]
  })
  export class LoginRouterModule {}
  </code></pre>
  
  <p><strong>login.module.ts</strong></p>
  
  <pre><code>import {NgModule} from '@angular/core';
  
  import {ComponentsModule, SharedModule} from '../../../shared';
  import {LoginComponent} from './login.component';
  import {LoginRouterModule} from './router';
  
  @NgModule({
    imports: [
      ComponentsModule,
      SharedModule,
      LoginRouterModule
    ],
    exports: [
      ComponentsModule,
      SharedModule,
      LoginRouterModule
    ]
  })
  
  export class LoginModule {}
  </code></pre>
  
  <p>The problem though is that as soon as I add the <code>children</code> part, <code>/admin</code> stops working all together, throwing the error <code>Cannot match any routes. URL Segment: 'admin'</code>.</p>
  
  <p>Is this not how you define child routes of a lazy loaded route? How can I fix it?</p>