Sunday

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 https://github.com/srinivastamada/angular-routing.git
$ cd angular-routing
angular-routinggit checkout angular7

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


devDependencies“:
…..
@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

to


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



index.routes.ts
Update the loadChilder with promise response.


importRoutefrom@angular/router;

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: () =>

      import(../index/system-error/system-error.module).then(

    m => m.SystemErrorModule



home.routes.ts
Load the modules with promise response.


importRoutefrom@angular/router;

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

import HomeComponent from ./home.component;


export const HomeRoutes: Route[] = [

component: HomeComponent,

canActivate: [AuthGuard],

children: [

      path: ,

      loadChildren: () =>

        import(../home/dashboard/dashboard.module).then(

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

tsconfig.app.json
Update the module es2105 to commonjs. Even cross verify the tsconfig.json base file.


{

extends: ../tsconfig.json,

compilerOptions:

outDir: ../out-tsc/app,

module: commonjs, // or esnext

baseUrl: ./,

types: []

exclude: [

src/test.ts,

**/*.spec.ts