Angular Modules - Custom Lazy Load Strategy
Tags: angular, tutorial, beginners, typescript
Published: 2020-03-26 12:40:58

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**

```javascript
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](https://stackblitz.com/edit/eager-load) 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](https://stackblitz.com/edit/angular-ll) 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](https://stackblitz.com/edit/angular-custom-preloading-strategy) 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!