An Introduction to NgModules

Nivetha Maran | ng-conf | Sep 2020

In this blog we are going to see an introduction to one of the most important concepts while creating large size Angular applications, i.e ‘NgModules’.

Note: NgModules is really a vast topic and we are going to cover the specific introductory concepts below:-

1. What are NgModules ?
2. How to create NgModules in Angular applications?
3. Metadata of NgModules

What Are NgModules?

The main purpose of the NgModules is to organize the complex relationship between the views such as components, directives, and the data providers such as services in a single module file, which defines a particular feature of an application (eg: login feature). This actually helps the developer give a definition of the relationship between components and services in a single file instead of declaring them in all the files separately.

Other great benefits of using NgModules are:

1. We can lazy load a particular module which is not used on the initial load , this in turn increases the performance .
2. Additionally we can also control who can access which module of our application by using route guards.

In any larger scale Angular applications, there will be a lot of features present, so the application kind of becomes complex. And NgModules provides us a solution of grouping them as separate modules. We will see in the below sections on how it’s exactly done.

How to Create NgModules?

As seen in the below code snippet,

1. Firstly , we will import ‘NgModules’ from ‘@angular/core’.
2. Once imported, the decorator can be used to declare all the components and services used by that particular module.
3. And finally, we will be export the module using ‘export’ keyword which can be used by other modules.

import { NgModule } from ‘@angular/core’;
@NgModule({
})
export class AppModule{}

In any Angular application, we are having four parts, i.e. Components, Services, Pipes, and Directives as seen below:

Using NgModules, we will be grouping the related components, pipes, and directives together under declarations, imports, and exports as highlighted in the below diagram. Services go under providers.

Metadata of NgModules:

Now we will see the various properties that are available while creating an NgModule. There are five main properties as listed below:

1. Declarations
2. Exports
3. Imports
4. Bootstrap
5. Providers

1. Declaration:

The first property is called a declaration, where we will declare all the components, directives, and pipes which are available to a particular feature. It looks like:

                     declarations : [
                         Components,
                         Directives,
                         Pipes
                      ]

2. Exports :

When module A is imported by module B, then we have to export the module A in order to be used by other modules. By exporting module A, we can use any of the components, directives, services or pipes present in module A in any imported module.

This is based on the object oriented programming concept, where the components, directives, and pipes are by default private and we need to add them in the export module to make it usable by other modules. It looks like:

                       exports : [
                          PublicComponents,
                          PublicDirectives,
                          PublicPipes
                        ]

3. Imports:

So, all the exported components and pipes from other modules can be imported in a module by declaring them in an import section of NgModule.

                       imports : [
                            ModuleA,
                            ModuleB,
                            ModuleC
                         ]

4. Bootstrap:

Then in the bootstrap property, we will be declaring the root component which is used to initially load our application by calling the component declared here. Usually, the App Component is the default component that will be declared here in any Angular application.

                         bootstrap : [
                             RootComponent
                          ]

5. Providers:

Then, at last, in the providers property, we provide all the data providers like services and auth guards here. So these services can be used in the declared module and all the modules which import this particular module.

                       providers : [
                           Services,
                           Guards
                        ]

So, these are the various properties that we can declare in NgModule and define the relationship between various components, services, and pipes required for a particular feature easily using NgModules.

An example of NgModule would look like below:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
imports: [ BrowserModule ],
providers: [ Logger ],
declarations: [ AppComponent ],
exports:[ AppComponent ],
bootstrap:[ AppComponent ]
})
export class AppModule { }

Things to be considered while using modules:

1. Services by default are ‘providedIn’ or attached to the root module, thus available by any code in the application essentially.
2. Services can instead be provided by a specific module, but we also need to specify that in the ‘providedIn’ property of the ‘@Injectable’ decorator . When not utilizing ‘root’ for where they are connected, we have to watch out for tricky circular dependencies though. Components injecting a service that is also provided in the same module that will cause this.

Summary:

To summarize, first, we saw what NgModules are, how they are used to organize the complex relationship between the views such as components, directives, and the data providers for a particular application. Then we saw how to create NgModule with a decorator. We finally saw the various properties of NgModule like imports, exports, declarations, bootstrap, and providers. I know it’s a pretty vast topic to cover in a single blog, but hopefully you were able to get a basic idea of NgModules.

ng-conf: The Musical is coming

ng-conf: The Musical is a two-day conference from the ng-conf folks coming on April 22nd & 23rd, 2021. Check it out at ng-conf.org

Thanks to BR Avery and Steven Guitar.