Eagerly load Angular Modules🤩
Published: 2022-01-15 08:38:19



## 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
](https://dev.to/krishna7852/angular-module-loading-eager-lazy-and-preloading-3jj4)