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

5 comments:

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

    ReplyDelete
  2. Can you tell me how you produced the tree diagram on the A8 Lazy Loading tutorial? I need to be able to draw such a diagram for a project I have in mind. Thank you and thanks for all the great articles!

    ReplyDelete
  3. Implementing lazy loading at module level or using lazy loading module for every component. Which one is better. Can you help me out please?

    ReplyDelete
  4. It happens next error to the load the application --> [ERROR in Cannot read property 'loadChildren' of null], then save file app.routing.ts and ready all good the application it works, but do you know because it happens that?

    ReplyDelete

Make in India