user.profile.component.ts

import { Component } from '@angular/core'

@Component({
  template: `
    <h1>Edit Your Profile</h1>
    <hr>
    <div class="col-md-6">
      <h3>[Edit profile form will go here]</h3>
      <br />
      <br />
      <button type="submit" class="btn btn-primary">Save</button>
      <button type="button" class="btn btn-default">Cancel</button>
    </div>
  `,
})
export class ProfileComponent {
       
}

user.module.ts

import { ProfileComponent } from './profile.component';
import { NgModule } from '@angular/core'
import { CommonModule } from '@angular/common'
import { RouterModule } from '@angular/router'
import { userRoutes } from './user.routes'

@NgModule({
    imports: [
        CommonModule,
        RouterModule.forChild(userRoutes)
    ],
    declarations: [
        ProfileComponent
    ],
    providers: [

    ]

})
export class UserModule{

}

user.routes.ts

import { ProfileComponent } from './profile.component';


export const userRoutes = [
    { path: 'profile', component: ProfileComponent}
]

routes.ts

import { Routes } from '@angular/router'
import { CreateEventComponent } from './app/events/event-details/create-event.component';
import { EventDetailsComponent } from './app/events/event-details/event-details.component';
import { EventListComponent } from './app/events/event-list.component';
import { EventRouteActivator } from './app/events/event-details/event-route.activator.service';
import { EventListResolver } from './app/events/shared/events-list-resolver.service';
import { Error404Component } from './app/errors/404.component';

export const appRoutes:Routes = [
    { path: 'events/new', component: CreateEventComponent, canDeactivate: ['canDeactivateCreateEvent']},
    { path: 'events', component: EventListComponent },
    { path: 'events/:id', component: EventDetailsComponent, canActivate: [EventRouteActivator] },   
    { path: '404', component: Error404Component }, 
    { path: '', redirectTo: '/events', pathMatch: 'full' },
    { path: 'user', loadChildren: './app/user/user.module#UserModule' }
]

nav-bar.component.html

<div class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" >ngEvents</a>
      </div>
  
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li>
            <a [routerLink]="['/events']" routerLinkActive="active"
            [routerLinkActiveOptions]="{exact:true}">All Events</a>
          </li>
          <li><a [routerLink]="['/events/new']" routerLinkActive="active">Create Event</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" >
              Events
              <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
              <li >
                <a href="">Angular Connect</a>
              </li>
            </ul>
          </li>
        </ul>
        <div class="navbar-header navbar-right">
          <ul class="nav navbar-nav">
            <li>
              <a [routerLink]="['user/profile']">Welcome John</a>
            </li>
          </ul>
        </div>
        <form id="searchForm"  class="navbar-form navbar-right"  >
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Search Sessions" >
          </div>
          <button class="btn btn-default" >
            Search
          </button>
        </form>
      </div>
    </div>
  </div>

The post Lazy loading modules first appeared on Bipon's Diary.