Angular Router

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 ...