Lazy loading

We start with extracting all the contacts-related components and routes into a separate file:

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

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

const ROUTES = [
  { path: '', component: ContactsComponent },
  { path: ':id', component: ContactComponent }
];

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

In Angular an ng module is part of an application that can be bundled and loaded independently. So we have defined one in the preceding code.

Referring to lazily-loaded module

Now, after extracting the contacts module, we need to update the main module to refer to the newly extracted one:

const ROUTES = [
  {
    path: 'contacts',
    loadChildren: 'contacts.bundle.js',
  },
  {
    path:...