Angular 8 Lazy Load Routing.
Wall Script
MailxEngine
Thursday, June 06, 2019

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


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.
import { Route } from '@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.
import { Route } from '@angular/router';
import { AuthGuard } from './../guards/auth.guard';
import { HomeComponent } from './home.component';

export const HomeRoutes: Route[] = [
{
path: '',
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"
]
}
web notification

1 comments:

  1. Wow, another great tutorial on Angular 8. Can't wait to try this out. Thanks for the useful post.

    ReplyDelete

Make in India