Lazy Loading in Angular 4

What is Lazy Loading in Angular 4 ?

Lazy Loading means load component after click on navigation.

But this will be work with module, if you remember we create Child Routing | forChild() 

There we need to call just module file instead of component with loadChildren

 

–TS file (app-routing.module.ts)

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";

import { ShoppingListComponent } from "./shopping-list/shopping-list.component";
import { HomeComponent } from "./home/home.component";

const appRoutes: Routes = [
    { path: '', component: HomeComponent},
    { path: 'recipes', loadChildren: './recipes/recipes.modules#RecipesModule' },
    { path: 'shopping-list', component: ShoppingListComponent},
];

@NgModule({
    imports: [RouterModule.forRoot(appRoutes)],
    exports: [RouterModule]
})
export class AppRoutingModule{

}

Why need Lazy Loading ?

This will be increase site speed. Not load unnecessary component or module. Until you want.