众乐棋牌旧版下载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.





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 http://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"
]
}

5 comments:

  1. wow, another great tutorial on angular 8. can't wait to try this out. thanks for the useful post.

    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!

    云南快乐十分走势图基本走势图augury chrome addon

    云南快乐十分走势图基本走势图implementing lazy loading at module level or using lazy loading module for every component. which one is better. can you help me out please?

    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?

乐优彩票天天红单下载 乐优彩票登入,备用,官方网址 乐优彩票网址是多少 乐和彩彩票网 乐优炫彩app 乐优炫彩官网 乐优炫彩app天天红单 乐优炫彩彩票app下载 乐体育app下载 乐信pc下载