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.
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-routing$ git checkout angular7
$ cd angular-routing
angular-routing$ git checkout angular7
package.json
Update the project angular/cli version with 7+ and execute npm install
"devDependencies": {
.....
"@angular/cli": "^7.3.7",
.....
}
.....
"@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)
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"
]
Wow, another great tutorial on Angular 8. Can't wait to try this out. Thanks for the useful post.
ReplyDeleteCan 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!
ReplyDeleteAugury Chrome Addon
DeleteImplementing lazy loading at module level or using lazy loading module for every component. Which one is better. Can you help me out please?
ReplyDeleteIt 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?
ReplyDeleteThanks for your article.
ReplyDeleteionic generate pages
ReplyDeletei am getting error
An unhandled exception occurred: Collection "@ionic/angular-toolkit" cannot be resolved.
please help