Deep linking

But it gets better! The router also supports deep linking into lazily-loaded modules.

To see what I mean imagine that the contacts module lazy loads another one:

contacts.ts:
import {Component, NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';

@Component({...}) class AllContactsComponent {}
@Component({...}) class ContactComponent {}

const ROUTES = [
  { path: '', component: ContactsComponent },
  { path: ':id', component: ContactComponent, loadChildren: 'details.bundle.js' }
];

@NgModule({
  imports: [RouterModule.forChild(ROUTES)]
})
class ContactsModule {}

details.ts:

@Component({...}) class BriefComponent {}
@Component({...}) class DetailComponent {}

const ROUTES = [
  { path: '', component: BriefDetailComponent },
  { path: 'detail', component: DetailComponent },
];

@NgModule({
  imports: [RouterModule...