Lazy loading feature Modules in Angular
It helps keep the Initial bundle size smaller. Let's dig in!
Hello awesome people👋, welcome back!
Introduction
Angular app development is much easier with the CLI and other tools that come out of the box with Angular. We can create an app and spin that in Cloud in minutes.
But all that matters are:
- How efficiently we are architecting the App, splitting the whole application into smaller chunks as individual modules.
- The size of the initial module that gets served when an app is launched, as it impacts the loading time of an App on the browser.
Lazy loading the feature modules comes to the rescue in serving individual modules as chunks based on Routes.
Let me demonstrate the concept with a quick example.
What is lazy-loading?
Lazy loading is a design pattern, in which modules (respective components and assets) are loaded as and when required. Say, when the User navigates to /contact
, the contact
Module is loaded. This way loading of all Modules on the launch of the app on the browser is avoided, which improves the page speed.
Create a new project
Let's create a new project by running this command ng n ng-lazy-loading --routing
The --routing
flag generates the Router module file (app-routing.module.ts) out of the box and does the basic Routes configuration.
Setup Lazy loading
Let's create a feature module called dashboard
and load it when the route dashboard
is accessed.
Dashboard Module
Run the command ng g m dashboard --route dashboard --module app.module
.
This command:
- Creates
dashboard
module underapp.module
.
- Configures route called
dashboard
fordashboard
module in Router module.
const routes: Routes = [
{
path: 'dashboard',
loadChildren: () =>
import('./dashboard/dashboard.module').
then((m) => m.DashboardModule),
},
];
Contact Module
Let's create another module called contact
by running this command ng g m contact --route contact --module app.module
.
contact
module created under App module.
You should see app-routing.module.ts
updated with route configuration for contact
module as well.
const routes: Routes = [
{
path: 'dashboard',
loadChildren: () =>
import('./dashboard/dashboard.module').
then((m) => m.DashboardModule),
},
{
path: 'contact',
loadChildren: () =>
import('./contact/contact.module').
then((m) => m.ContactModule),
},
];
Default Route
Let's add the default route in app-routing.module.ts
just in case if the routes accessed by the User not matching either dashboard
or contact
.
{
path: '',
redirectTo: '',
pathMatch: 'full'
}
Verify lazy-loaded modules using Developer tools
- Open
app.component.html
and replace the code with:
<button style="margin: 20px; padding: 20px; color: white; background-color:'#518ded';" routerLink="">Home</button>
<button style="margin: 20px; padding:20px; color: white; background-color:'#ed6651';" routerLink="dashboard">Dashboard</button>
<button style="margin: 20px; padding:20px; color: white; background-color:'#edb451';" routerLink="contact">Contact</button>
<router-outlet></router-outlet>
- Make sure your application is running on your local machine.
- Goto http://localhost:4200/. Open
developer tools
(Press F12).
- Click on the
dashboard
button, you must see thedashboard
module chunk loaded in the console.
- Now click on the
contact
button, you must see thecontact
module chunk loaded in the console.
Where does Lazy loading fit?
- Assume you are developing an e-commerce application like Amazon, Flipkart.
- You know how many pages an e-commerce app will have. Probably 1000+, and you need to put them in different modules like:
- Login
- Dashboard
- Products
- Checkout
- Billing
- Orders
- Contact
- Logout
- You should not load all these modules when the app is loaded on the browser for the first time, as that will make the User wait for a long time to see the page on the browser. Right?
- Better solution is to load these modules as the User navigates through different pages.
- Load
contact
module only when the User clicks on theContact us
button on the page. - Similarly handle the loading of other modules based on the User actions.
Putting all together
Lazy loading doesn't help much for an application that has fewer pages. But it matters a lot for enterprise-level applications.
Individual modules are loaded when the user navigates to the respective routes, which improves the page speed that helps in achieving a good SEO rank from Google, Bing, and also a better User experience.
Hope you find this article useful, please feel free to share it with your friends/colleagues.
If you got any questions, feel free to post them in the comments section down below.
Happy learning!
I tweet a lot about Web development, Java, and Productivity Hacks, so feel free to follow me on Twitter at AskUdhay.
Here is one of my recent tweets: