Lazy Loading with
Angular 4 and TypeScript

Step by step example for 'lazy' loading
modules and components.


  1. Create component with the angular CLI .
    ng g component loremipsum
  2. Remove the declarations for the component in app.module.ts and in the routes
  3. In the component's folder create module loremipsum.module.ts
    1. Import the component in the module
      import {loremipsum} from './loremipsum.component'; 
    2. Import Routes, RouterModule, NgModule into the module
      import {NgModule} from "@angular/core";
      import {Routes, RouterModule } from '@angular/router';
    3. Export route for this module
      export const loremRoutes: Routes = [
        { path: '', component: loremipsum }
      ];
    4. The Module should import the routes and declare the imported component
      @NgModule({
        imports:[RouterModule.forChild(loremRoutes)],
        declarations: [loremipsum]
      })
      export class Helloloremipsum{}
      
  4. In the routes definition you should add the path definition, for example:
    {
        path: 'lorem-ipsum-path',
        loadChildren: './loremipsum.module#Helloloremipsum'
    }

    The string after the hash # points the exported class in the module.