Lazy loading is a very useful concept in Angular. It is a process of loading NgModules only when you navigate to the route. If you have a large application with numerous routes, you should consider using this concept. It will keep the initial bundle sizes smaller and as a result, the application can be loaded much faster.
Enter the following command to create a new app called test-app
with a routing file called app-routing.module.ts
. This is one of the files which we need to set up lazy loading for our feature modules.
ng new test-app --routing
Navigate to the root folder of the app by using the following command:
cd test-app
Next, we need to create our feature modules with components to navigate to.
To create a new module, execute the following command.
ng generate module home --route homepage --module app.module
The command above will generate a new module called home
and homepage
as the route path to load the home component. In addition, it will add the homepage
route inside the Routes array inside this module as the --module
options.
app-routing.module.ts
Here is the result of our app-routing.module.ts file.
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{ path: 'home',
loadChildren: () => import('./home/home.module').then(m =>
m.HomeModule)
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
The loadChildren
property is used to specify the module that needs to be lazy-loaded when it is first navigated to.
In Angular 8, dynamic import syntax was introduced for lazy-loaded routes as one of the new features instead of a custom string as in previous versions.
To demonstrate the functionality of this lazy loading, we need to create 2 more modules called profile and settings.
ng generate module profile--route profile --module app.module
ng generate module settings --route settings--module app.module
We will create a list of modules in app.component.html
with hyperlinks to link to each component.
app.component.html
<ul>
<li>
<a routerLink="home">Home</a>
</li>
<li>
<a routerLink="profile">Profile</a>
</li>
<li>
<a routerLink="settings">Settings</a>
</li>
</ul>
<router-outlet></router-outlet>
Here is the result when you try to navigate to each module.
We can see that each module is called ONLY when we navigate to the link. You can check the module is indeed being lazy-loaded with developer tools in your browser.
In this article, we have learned how to implement lazy loading in an Angular application and how to check its functionality in our browser.
If you think this article was helpful, don’t forget to share it with your friends.
☞ Angular Tutorial - Learn Angular from Scratch
☞ Web Development Tutorial - JavaScript, HTML, CSS
☞ Javascript Project Tutorial: Budget App
☞ Test Driven Development with Angular
☞ JavaScript Programming Tutorial Full Course for Beginners
☞ E-Commerce JavaScript Tutorial - Shopping Cart from Scratch