Eagerly load Angular Modules🤩

Eager loading

1. In eager loading module, feature modules are loaded before application start on the first hit. To load a feature module eagerly, we need to import that module in application module i.e. AppModule using imports metadata of @NgModule decorator.
2. When a module is loaded, it loads all the imported modules, configured components, services, custom pipes etc.
3. Modules are loaded in the order they are configured in imports metadata.
4. Eager loading is good for small applications because at the first hit of the application all the modules are loaded and all the required dependencies are resolved. Now the subsequent access to the application will be faster .

Now find the example. In the example we have two feature modules and we will load them eagerly.
Module and routing module for feature 1:
country.module.ts

import { NgModule }   from '@angular/core';
import { CommonModule }   from '@angular/common';
import { ReactiveFormsModule }    from '@angular/forms';
import { CountryComponent }  from './country.component';
import { CountryListComponent }  from './country-list/country.list.component';
import { CountryService } from './services/country.service';
import { CountryRoutingModule }  from './country-routing.module';

@NgModule({
  imports: [     
        CommonModule,
    ReactiveFormsModule,
    CountryRoutingModule
  ], 
  declarations: [
    CountryComponent,
    CountryListComponent
  ],
  providers: [ CountryService ]
})
export class CountryModule {
  constructor() {
    console.log('CountryModule loaded.');
  }
}

country-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CountryComponent }  from './country.component';
import { CountryListComponent }  from './country-list/country.list.component';

const countryRoutes: Routes = [
    { 
      path: 'country',
          component: CountryComponent,
          children: [ 
        {
          path: 'country-list',
          component: CountryListComponent
        }  
      ]
    }   
];

@NgModule({
  imports: [ RouterModule.forChild(countryRoutes) ],
  exports: [ RouterModule ]
})
export class CountryRoutingModule { } 

Module and routing module for feature 2:
person.module.ts

import { NgModule }   from '@angular/core';
import { CommonModule }   from '@angular/common';
import { ReactiveFormsModule }    from '@angular/forms';
import { PersonComponent }  from './person.component';
import { PersonListComponent }  from './person-list/person.list.component';
import { PersonService } from './services/person.service';
import { PersonRoutingModule }  from './person-routing.module';

@NgModule({
  imports: [     
    CommonModule,
    ReactiveFormsModule,
    PersonRoutingModule
  ], 
  declarations: [
    PersonComponent,
    PersonListComponent
  ],
  providers: [ PersonService ]
})
export class PersonModule { 
  constructor() {
    console.log('PersonModule loaded.');
  }
} 

person-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { PersonComponent }  from './person.component';
import { PersonListComponent }  from './person-list/person.list.component';

const personRoutes: Routes = [
    { 
      path: 'person',
          component: PersonComponent,
      children: [ 
        {
           path: 'person-list',
           component: PersonListComponent
        }
      ]
    }  
];

@NgModule({
  imports: [ RouterModule.forChild(personRoutes) ],
  exports: [ RouterModule ]
})
export class PersonRoutingModule { }

To achieve eager loading, we will import features modules in AppModule using imports metadata of @NgModule decorator.

import { NgModule }   from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { AddressComponent }  from './address.component';
import { PageNotFoundComponent }  from './page-not-found.component';
import { CountryModule }  from './country/country.module';
import { PersonModule }  from './person/person.module';
import { AppRoutingModule }  from './app-routing.module';

@NgModule({
  imports: [     
    BrowserModule,
    CountryModule,
    PersonModule,
    AppRoutingModule
  ],
  declarations: [
    AppComponent,
    AddressComponent,
    PageNotFoundComponent
  ],
  providers: [ ],
  bootstrap: [ AppComponent ]
})
export class AppModule { 
  constructor() {
     console.log('AppModule loaded.');
  }
} 

The modules will be loaded in the order: BrowserModule -> CountryModule -> PersonModule-> AppRoutingModule.
Find the code for AppRoutingModule.

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AddressComponent }  from './address.component';
import { PageNotFoundComponent }  from './page-not-found.component';

const routes: Routes = [
   {
    path: 'address',
    component: AddressComponent
   },   
   {
    path: '',
    redirectTo: '/country',
    pathMatch: 'full'
   },
   {
    path: '**',
    component: PageNotFoundComponent 
   }    
];

@NgModule({
  imports: [ 
        RouterModule.forRoot(routes) 
  ],
  exports: [ 
        RouterModule 
  ]
})
export class AppRoutingModule { } 

Output
When we access the application first time, we will get following output in browser console.

CountryModule loaded.
PersonModule loaded.
AppModule loaded.
Angular is running in the development mode. Call enableProdMode() to enable the production mode.

We can see that before loading AppModule, all imported module in their order has been loaded.

Checkout to main blog Angular Module Loading strategies