Angular Modules - Custom Lazy Load Strategy

Contents:

• What are modules
• Example of a module
• Lazy-loading feature modules
  • Default way
  • Using custom preload strategy
• Summary

Before we tackle module lazy loading and custom preloading strategies, let's start from the beginning and figure out what modules actually are.

What are modules

As you may know, Angular apps are modular based and Angular has its own modularity system called NgModules.

NgModules are like containers for a closely related set of capabilities, for example, you can have auth, user, booking, shared modules that can contain components, directives, pipes, services and other cohesive blocks of code.

Each module can import functionality that is exported from other NgModules, and export selected functionality for use by other NgModules achieving encapsulation.

Example of a module

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

@NgModule({
  imports:      [ BrowserModule ],
  providers:    [ MyLogger ],
  declarations: [ AppComponent ],
  exports:      [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

In order to define a module we need to use NgModule() class decorator and pass metadata to it, here are commonly used properties:

imports: an array of other modules that are imported in this case by AppModule, we are importing other modules when we want to reuse for example components or directives defined in them.

providers: an array of services defined in AppModule; they become accessible in all parts of the app.

declarations: an array of components, directives, and pipes that belong to this NgModule.

exports: an array of components, directives, and pipes that belong to this NgModule but we want to make them publicly visible, or should I say, imported and reused by other modules.

bootstrap: The main application view, which hosts all other app views. Only the root NgModule should set the bootstrap property

By default, NgModules are eagerly loaded, which means that as soon as the app loads, so do all the NgModules, whether or not they are immediately necessary.

Here you can see an example of module eager load (please open the console to see the outputs; both modules are loaded at the same time).

Lazy-loading feature modules

For large apps with lots of routes and modules, consider lazy loading — a design pattern that loads NgModules as needed. Lazy loading helps keep initial bundle sizes smaller, which in turn helps decrease load times.

Default way

Here you can see an example of a module being lazy-loaded (please open the console, at the beginning only AppModule will be loaded, after you click on Go to login button the AuthModule will be loaded on demand).

Using custom preload strategy

Here you can see an example with custom lazy load strategy - this means than you can provide additional metadata for a module and load it in after a certain period of time. This can be useful if you aware of your application flow, and for example while user is on module 1 may be filling up forms then using custom preload strategy module 2 will be downloaded in the background. (please open the console, at the beginning only AppModule will be loaded, after 5 seconds AuthModule will be loaded as well).

Summary

To wrap-up, lazy loading is a really useful and powerful feature available by default in the Angular framework. You should use it regularly in order to have smaller initial bundles and improve application performance.

Please, leave a comment down below if you would like to see in-depth explanations of examples used above.

Thanks for reading!