Angular 17 Lazy Loading Demo

To create a simple demonstration of lazy loading with Angular 17, let’s walk through the steps to set up a new Angular project, create a couple of feature modules, and configure them for lazy loading. This process involves creating separate modules for different parts of your application and then loading them on demand. Here’s a basic walkthrough:

1. Setting up a New Angular Project

First, ensure you have the Angular CLI installed. If not, you can install it globally on your system via npm:

npm install -g @angular/cli

Then, create a new Angular project:

ng new angular-lazy-loading-demo

Navigate to your project directory:

cd angular-lazy-loading-demo

2. Generating Feature Modules

For this demo, let’s create two feature modules, HomeModule and AboutModule, which we’ll load lazily.

Run these commands in your terminal:

ng generate module Home --route home --module app.module
ng generate module About --route about --module app.module

These commands do two things: they generate the modules and configure the routes in the app-routing.module.ts to load the modules lazily.

3. Understanding the Configuration

After running the commands, if you open the app-routing.module.ts, you should see something like this:

const routes: Routes = [
  { path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) },
  { path: 'about', loadChildren: () => import('./about/about.module').then(m => m.AboutModule) },
  { path: '', redirectTo: '/home', pathMatch: 'full' },
];

This configuration defines routes for home and about, specifying that these modules should be loaded lazily with the loadChildren syntax.

4. Adding Components to Modules

For each module, you might want to generate a component:

ng generate component Home/Home --module=Home
ng generate component About/About --module=About

And then, ensure each module’s routing (home-routing.module.ts and about-routing.module.ts) is set up to display these components. For example, home-routing.module.ts might look like:

const routes: Routes = [
  { path: '', component: HomeComponent },
];

5. Running the Application

Finally, serve your application:

ng serve

Navigate to http://localhost:4200/ in your browser. You should be able to switch between the Home and About sections, with each module being loaded lazily as you navigate.

Conclusion

This basic example sets up lazy loading for two feature modules in an Angular 17 application. Angular’s lazy loading helps in loading feature modules lazily, which can significantly improve the initial load time of your application by splitting the final bundle into smaller chunks and loading them on demand.

Tags:Angular 17