Angular 2 how to define lazy loaded child routes of a parent route that's also lazy loaded
<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>