Angular 8 Lazy Load Routing.

Angular announced a new version 8.0 and its improved few methods and the compiler to reduce the bundle size 40% less. Now time to update my previous article Angular Routing with Lazy loading Design Pattern. This post is about how to upgrade your Angular 7 application with Angular 8 configurations and changing the lazy load routing with Angular 8 loadChilder promise method. Take a look the setup video to understand more.

Angular 8 Lazy Load Routing.

Live Demo
Required Softwares

  • NodeJS Version 12+

  • Angular Cli 8+

Video Tutorial
[embedded content]

Install Angular Command Line
Install latest node and execute the following command using terminal or command promote.

$ npm install -g @angular/cli

$ git clone
$ cd angular-routing
angular-routinggit checkout angular7

Update the project angular/cli version with 7+ and execute npm install

@angular/cli“: “^7.3.7“,

Upgrade Angular 7 to 8
The following command will take care about main.ts, polyfills.ts and ets

angular-routing$ ng update @angular/cli @angular/core

Updating the Routes
For understanding the lazy loading design patterns, follow the article Angular Routing with Lazy Loading Design Pattern

New Angular 8 Structure to load Modules.

loadChildren: ‘app/index/login/login.module#LoginModule


loadChildren: () => import(‘./index/login/login.module‘).then(m => m.LoginModule)

Update the loadChilder with promise response.


import LoginGuard from ../guards/login.guard;

import IndexComponent from ./index.component;

export const IndexRoutes: Route[] = [

   path: ,

   component: IndexComponent,

   canActivate: [LoginGuard],

children: [

    path: login,

    loadChildren: () =>

        import(../index/login/login.module).then(m => m.LoginModule)

    path: signup,

    loadChildren: () =>

       import(../index/signup/signup.module).then(m => m.SignupModule)

    path: forgot,

    loadChildren: () =>

      import(../index/forgot/forgot.module).then(m => m.ForgotModule)

    path: system-error,

    loadChildren: () =>


    m => m.SystemErrorModule

Load the modules with promise response.


import AuthGuard from ./../guards/auth.guard;

import HomeComponent from ./home.component;

export const HomeRoutes: Route[] = [

component: HomeComponent,

canActivate: [AuthGuard],

children: [

      path: ,

      loadChildren: () =>


        m => m.DashboardModule

      path: settings,

      loadChildren: () =>

         import(../home/settings/settings.module).then(m => m.SettingsModule)

      path: products,

     loadChildren: () =>

        import(../home/products/products.module).then(m => m.ProductsModule)

       path: user/:username,

       loadChildren: () =>

          import(../home/user/user.module).then(m => m.UserModule)

      path: user/:username/:id,

      loadChildren: () =>

         import(../home/user/user.module).then(m => m.UserModule)

Build Error
When you execute the production build “ng build –prod“, sometimes you will get the following error to change the module flag.

ERROR in src/app/home/home.routes.ts(14,11): error TS1323: Dynamic import is only supported when ‘–module’ flag is ‘commonjs‘ or ‘esNext‘.
Update the module es2105 to commonjs. Even cross verify the tsconfig.json base file.


extends: ../tsconfig.json,


outDir: ../out-tsc/app,

module: commonjs, // or esnext

baseUrl: ./,

types: []

exclude: [