An Introduction To Angular Modules

What are Angular modules?

Angular is a Modular framework. Modularity is the property which measures the amount to which components connected together within a system can be separated as an individual unit and can function by themselves without depending on each other. Here in Angular, Module is a unit that groups Components, Pipes, Directives, and Services. An angular application can contain several modules. There is minimum one module present in every angular application, which is NgModule. The default NgModule is AppModule and is present in app.module.ts file. When you launch the application, this is the module that gets bootstrapped. You can also import and export functionalities from one module to the other for efficient and clean programming.

Common Types of Modules

App Module

The app (also referred to as root) module is the entry point module. Because of this, you want to keep this to the bare essentials needed to bootstrap your app. In this module, you will bring in entry-level components and other app-level modules. See

Core Module

The core module is used to provide your singleton services and any high-level functionality. Any component, directive, or pipe that isn’t feature specific and is only used once in the app should end up in the core module. An example of this could be a navbar or footer component that is called once in your app component. This module should be imported once in the App module.

Shared Module

The shared module holds common UI components, directives, and pipes that are going to be used in many — if not every — feature module. This can include common Material UI modules, such as MatButtonModule or MatSelectModule. If you notice you are importing a module into every feature module, you should refactor it to live in the shared module instead.

Feature Modules

Feature modules will depend heavily on your application but ultimately this allows you to break up your app into small, single-purpose, chunks. In a feature module, you can import other modules, services, components, pipes, and directives that will be used in this feature.

Routing Module

The routing module is used when your application needs to have multiple pages. For example, a shopping app might need a route to /shopping-cart and /inventory. You can have multiple routing modules within your application, typically these will correlate to a feature module.

Defining a Module

You can define a module by importing NgModule decorator from @angular/core and passing a config with components, directives, pipes, and services that you want to use.

The config used above holds the most commonly used fields when defining a module.

• Declarations: This one contains the name of components, pipes, and directives which are present in the NgModule.
• Imports: This contains the names of other modules whose functionalities are required by the components of this particular module.
• Exports: This is responsible for making the component template visible to other modules that can import functionalities from this Module.
• Providers: When NgModule runs, its main function is to provide the application with services. The provider is responsible for creating Services that the NgModule requires. The services are accessible from all parts of the App.
• Bootstrap: This is the Property of Root Module. Bootstrapping is the process which initializes the root module. The root module is responsible for initializing all the other modules.

Bootstrapping in Angular

Bootstrapping is the first process that comes into play when you start your application. This process is responsible for initializing the root module. When the root module initializes, then all the other modules initialize via the root module. To bootstrap the Module, we need to mention it in our main.ts file:

What is Lazy Loading?

Lazy loading is the process of loading components, modules, or other assets of a website as they’re required. Lazy loading modules helps us decrease the startup time. With lazy loading our application does not need to load everything at once, it only needs to load what the user expects to see when the app first loads. Modules that are lazily loaded will only be loaded when the user navigates to their routes.

Since Angular creates a SPA (Single Page Application), all of its components are loaded at once. This means that a lot of unnecessary libraries or modules might be loaded as well.

For a small application this would be okay. But as the application grows the load time will increase if everything is loaded at once. Lazy loading allows Angular to load components and modules as and when they’re needed.

To lazy load modules, In your main routing configuration, you will want to do something like the following:

How to Preload Angular Lazy Loaded Modules in the Background

When working with the Angular lazy-loaded modules, have you ever been in a situation where it takes so much time to load. It gets worse If your lazy module is much larger than the main module. Now it might take more time to load compared to applications initial load. Here, we gonna discuss how to load the lazy modules asynchronously in the background instead of on-demand so at the time user interact with the lazy-loaded modules, it’s already preloaded.

Let’s say you have an application with a button that redirects you to a lazy-loaded module. In a typical scenario, the lazy-loaded module starts to get loaded when the user clicks on that button. But with the preload mechanism, the lazy module starts to load soon after the main module gets loaded. So, at the time user interact with the lazy module, it’s already there. Pretty cool right.

What is preloading?

Preloading is similar to lazy-loading. In lazy-loading, modules are loaded on demand from the user. but what happens in preloading is all the feature modules which are assigned to be lazy-loaded are loaded asynchronously right after the eager loaded modules are done loading. Which simply means when a preloading strategy is used feature modules won’t have to wait to get load until the user navigate to them.

Preloading strategies in angular

Angular has a abstract class called PreloadingStrategy, by default it provides two sub classes. which are;

• NoPreloading: Default strategy in angular, which provide no preloading for any module.
• PreloadAllModules: Preload all the lazy-loading module as quickly as possible.

To use any of the above strategies what you have to do is add the strategy in your app-routing.module.ts as shown below.

Now, this looks all good. Although someone might ask “what if I only want to preload one lazy module instead of all”. Well, that’s a good question. If your application has more than one lazy loaded modules then loading all of it might be resource consuming. But don’t worry. As always Angular has the answer.

Angular provides a custom preloading strategy so that developers can explicitly specify which lazy modules they need to preload. All you need to do is set the data.preload flag to true in the lazy-loaded module route and angular take care of the rest.

Custom Pre-loading strategy

Custom preloading strategies allow to preload selective modules. We can also customize to preload modules after a certain delay after application starts. To create a custom preloading strategy, Angular provides PreloadingStrategy class with a preload method. We need to create a service by implementing PreloadingStrategy and overriding its preload method. To enable custom preloading strategies, we need to configure our preloading strategy service with RouterModule.forRoot using preloadingStrategy property.

Custom strategies are very useful when you only want to preload certain modules, or you want to conditionally preload a module or add a delay.

CustomPreloading strategies are written as services which implement the PreloadingStrategy interface.

Conclusion

Angular modules are a fundamental building block to any Angular application. The purpose of NgModule is to organize the application, extend functionality from external libraries, and configure the compiler and injector. The structure of an NgModule contains declarations, imports, providers, and bootstrapping. When an application gets larger, it can be separated into different modules — the root module along with feature modules.