Angular module loading…

What is an angular module..?

An angular module( NgModule) is a container for a set of related components, services, directives and pipes which combines with other such modules to create an application. You can think a module as a package that implements a certain business functionality of your application. An angular application has one root module, the ‘app module’ that brings all the other modules which known as ‘feature modules’ together. In larger application its known to be the best practice to breakdown the features into their own modules which also enables three types of loading strategies. eager loading, lazy loading and preloading.

Module loading types…

The root module(AppModule) is loaded eagerly before the application starts, all the other feature modules can be loaded eagerly, lazily or using preloading strategy depending on your requirement.

Eager loading:

Is the default loading strategy in angular application. in eager loading all the feature modules are loaded before the application starts along with the root module. So the application load time will be slow. When you have a small sized app, using eager loading is considered because the total size will not be that large. In the first hit to the application all the modules and required dependencies are resolved therefore subsequent access in the application will be much faster.

To load a feature module eagerly, you need to import that module in application module(AppModule) using imports metadata of @NgModule decorator. When a module is loaded eagerly, it loads all the imported modules, components, services, pipes along with it.

Before going into lazy loading refer below solution structure, we are using it for the example code given in sections ahead.

sample solution structure

Eager loading

Lazy loading:

If we consider a web page, entire page contents are downloaded and rendered in a single go. But in real scenario there is no guarantee that the user would view all the downloaded content. Using lazy loading we can render the content on demand when needed. Also if the application size is growing with many feature modules, loading all the things eagerly will make application rendering slow. So overcome this we can load feature modules on-demand as the user navigates, this is also known as lazy loading.

To load feature module lazily, you have to use loadChildren property in route configuration and the modules should not be imported in appModule because if so they will be loaded eagerly.

const routes: Routes = [
  {
    path: ‘user’,
    loadChildren: ‘../app/user/user.module#UserModule’
  },
  ...
];

Refer the below code sample:

Changes required:

1. In route configuration of feature modules, change the parent path as empty string (“ ”).
2. Use loadChildren property to load feature modules in application routing module i.e. AppRoutingModule.
3. Remove all references of feature modules from application module i.e. AppModule.

Lazy loading

Preloading:

Feature modules can be loaded in the background asynchronously just after the application is started. This method is known as ‘pre-loading’. When the application get hit, appModule and the feature modules which has been imported by it will be loaded eagerly and after that modules configured for preloading will be loaded asynchronously.

Think of a website with a feature module that most of the users will access. Once the application is loaded with the initial bundle there’s no need to wait for the user to navigate into such modules. Those popular modules can be loaded in the background.

To configure preloading, angular provides preloadingStrategy property which can be used as below code snippet in import section in app-routing.module.ts

@NgModule({ 
  imports: [
    RouterModule.forRoot(ROUTES,
    {
      preloadingStrategy: PreloadAllModules
    })
  ]
})
export class AppRoutingModule { }

You can also provide your own preloading strategy for this. We will have another article for the custom preloading strategy.

If this article was helpful, click on the clap 👏 button below to show your support!

Thank you for reading 😊😊