Understand NgModule in 15 mins | by Bytecode Pandit

NgModule is really a very important concept of angular. And it helps to wire-up some important information for the compiler during run time. They are specially used for organizing the code into features, lazy loading routes, and creating reusable libraries.

We're going to cover some important uses of NgModule with some examples. I assume you have some working knowledge of Angular.

JavaScript Modules

I want to clear that NgModules are completely different from modules in javascript (sometimes called ES6 module). They are simply a language construct that helps us to organize our code.

For more information pls visit Javascript Modules

Let's dive into NgModule, the AppModule.

Let's start looking at a basic NgModule that exists in every Angular application i.e AppModule 

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

import { AppComponent } from './app.component';

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

let's discuss everything about this code snippet.

@NgModule: In angular, we use decorators, which Angular uses to know the required metadata during the compile time. So to define the NgModule we simply use the @NgModule decorator above the class. 

declarations: The declarations the array should contain a list of any directives, components, or pipes that this NgModule defines. It helps the compiler to find the required items and ensure that they bundled properly. If the NgModule is not a root module then the declaration items are available for all NgModule. Otherwise, they are visible to the same NgModule only.

imports: If your NgModule depends on any other objects from another NgModule (eg: RouterModule, HttpClientModule), then we have to add that Module in the imports array. With this, we ensure that the compiler and dependency injection system know about the imported items.

providers: The providers is an array that contains the list of the providers or simply we can say the list of services like AuthService, JWTService, etc which are available for this NgModule. And if they're listed in a lazy-loaded NgModule, they're not available outside of that NgModule.

bootstrap: In the bootstrap array, we add the entry component for our application. We can add multiple components. 

Example:  Suppose we want to create another module in the project.

@NgModule({
  declarations: [
    ChildComponent
  ],
  imports: [
    CommonModule,
    ChildRouteModule,
  ],
  exports: [
    ChildComponent
  ]
  providers: [
    ProfileService
  ]
})
export class ChildModule { }

As you can see from the code we have created the ChildModule, now we have to import it in root NgModule or we can use the lazy-loading. Then we can use it easily so, in this way we can make our application modular. 

When to import main Angular modules?    

A keen knowledge of angular modules is required, to know how many times you need to import them.

Modules to import each time you need them 

• CommonModule, FormsModule / ReactiveFormsModule
• MatXModule and other UI modules
• any other module giving you components, directives, or pipes

Module to import only once

• HttpClientModule
• BrowserAnimationsModule or NoopAnimationsModule
• any other module providing you services only.

Mixed NgModules

It can get messier: how to manage modules with components and services at the same time?

Personally, I preferred lazy-loaded modules, because it will be a different bundle and module, loaded only on demand by default, it's not included in the global scope of your app. 

Most importantly for components, it doesn't change anything, and for services, you can still have access to services already provided in the app.

Cool!🤟🤟

Thanks for your kind attention, pls share and comment if you like this post !!