Angular Lazy Loading And Ahead Of Time Compilation Complete Guide

Angular Lazy Loading

Lazy loading is a technique used to delay the loading of certain modules until they are needed. This can significantly reduce your initial application load time.

Step by Step Guide:

1. Install Angular CLI: If you haven’t already installed Angular CLI, run:

   npm install -g @angular/cli
   

2. Create a New Angular Project: Create a new Angular project using Angular CLI:

   ng new lazy-loading-demo
   cd lazy-loading-demo
   

3. Generate New Modules: Generate two new modules (home and about):

   ng generate module home --routing
   ng generate module about --routing
   

4. Set Up Routing for Child Modules: Open src/app/home/home-routing.module.ts and define routes for the HomeModule:

   import { NgModule } from '@angular/core';
   import { Routes, RouterModule } from '@angular/router';
   import { HomeComponent } from './home.component';
   
   const routes: Routes = [
     {
       path: '',
       component: HomeComponent
     }
   ];
   
   @NgModule({
     imports: [RouterModule.forChild(routes)],
     exports: [RouterModule]
   })
   export class HomeRoutingModule { }
   

   Similarly, open src/app/about/about-routing.module.ts and define routes for the AboutModule:

   import { NgModule } from '@angular/core';
   import { RouterModule, Routes } from '@angular/router';
   import { AboutComponent } from './about.component';
   
   const routes: Routes = [
     {
       path: '',
       component: AboutComponent
     }
   ];
   
   @NgModule({
     imports: [RouterModule.forChild(routes)],
     exports: [RouterModule]
   })
   export class AboutRoutingModule { }
   

5. Lazy Load Modules in App Routing Module: Modify src/app/app-routing.module.ts to lazy load the HomeModule and AboutModule:

   import { NgModule } from '@angular/core';
   import { RouterModule, Routes } from '@angular/router';
   
   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)
     }
   ];
   
   @NgModule({
     imports: [RouterModule.forRoot(routes)],
     exports: [RouterModule]
   })
   export class AppRoutingModule { }
   

6. Update the App Component Template: Add some navigation to switch between the Home and About components in src/app/app.component.html:

   <h1>Lazy Loading Demo</h1>
   <nav>
     <ul>
       <li>
         <a routerLink="/home">Home</a>
       </li>
       <li>
         <a routerLink="/about">About</a>
       </li>
     </ul>
   </nav>
   
   <router-outlet></router-outlet>
   

7. Run Your Application: Use the Angular CLI to serve your application:

   ng serve
   

8. Test Lazy Loading: Navigate to http://localhost:4200/home and http://localhost:4200/about. Check the Network tab in Developer Tools to see that the module chunks are being loaded only when necessary.

Ahead of Time (AoT) Compilation

Ahead-of-Time (AoT) compilation refers to compiling Angular templates into JavaScript code during the build process, rather than on the browser at runtime. This results in smaller applications and faster load times.

Step by Step Guide:

1. Create a New Angular Project (if you don't have one): If you skipped lazy loading, create a new project:

   ng new aot-demo
   cd aot-demo
   

2. Check Your Configuration: By default, Angular CLI generates projects with AoT compilation enabled for production builds. You can verify this by checking your angular.json:

   {
     ...
     "architect": {
       ...
       "build": {
         ...
         "configurations": {
           "production": {
             "fileReplacements": [ ... ],
             "aot": true, // This should be true
             ...
           }
         }
       }
     }
   }
   

3. Modify Components and Templates: Ensure you have some basic components and templates setup. For instance, in your app.component.html, add some content:

   <header>
     <h1>Ahead of Time Compilation Demo</h1>
     <nav>
       <ul>
         <li>
           <a routerLink="/home">Home</a>
         </li>
         <li>
           <a routerLink="/about">About</a>
         </li>
       </ul>
     </nav>
   </header>
   <main>
     <router-outlet></router-outlet>
   </main>
   

4. Generate Additional Components: Generate additional components (home and about):

   ng generate component home
   ng generate component about
   

5. Set Up Routes: Similar to lazy loading, set up routing in your app-routing.module.ts:

   import { NgModule } from '@angular/core';
   import { RouterModule, Routes } from '@angular/router';
   import { HomeComponent } from './home/home.component';
   import { AboutComponent } from './about/about.component';
   
   const routes: Routes = [
     {
       path: 'home',
       component: HomeComponent
     },
     {
       path: 'about',
       component: AboutComponent
     }
   ];
   
   @NgModule({
     imports: [RouterModule.forRoot(routes)],
     exports: [RouterModule]
   })
   export class AppRoutingModule { }
   

6. Build Production Version with AoT: Run the following command to build your project with AoT:

   ng build --prod
   

7. Verify AoT Compilation: Once built, check the generated files in the dist/<your-project-name> directory. AoT compiled files will not contain any of the Angular compiler (ngCompiler), making them slightly smaller and faster to load compared to JIT (Just-in-time).

8. Serve the Production Build: Serve the production build for testing:

   ng serve --prod
   

9. Test the Application: Open the browser and navigate to http://localhost:4200. The application should appear as before, but now it is more optimized due to AoT compilation.

Combining Lazy Loading and AoT Compilation

Combining the techniques described above, you can take full advantage of both performance gains.

1. Follow Lazy Loading Steps: Follow the steps for setting up lazy loading in an Angular project.

2. Build the Project with AoT: Since AoT is already enabled by default for production builds, simply run:

   ng build --prod
   

3. Check Generated Files: The chunks corresponding to lazily-loaded modules will be pre-compiled using AoT, reducing both the size and load time.