Angular 7 Modules

NgModules are the Angular's modularity system and the first basic structure you meet while coding an app in Angular. NgModules are containers for an integrated block of code allocated to an application domain. In Angular, a module is a mechanism to group components, directives, pipes and service providers which are related to the application.

To define a module, we use the NgModule. When you create a new project using the Angular -cli command, the NgModule is created in the app.module.ts file by default and it looks like as follows –

APP.MODULE.TS

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 { }

NgModules can import functionalities that are exported from other NgModules, and export selected functionalities for using in other NgModules.It is imported as follows-

APP.MODULE.TS

import { NgModule } from '@angular/core';

The structure of the NgModule is shown below –

APP.MODULE.TS

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

NgModule Metadata

In every Angular app, has at least one NgModule class which standard name is AppModule and resides in a file named as app.module.ts.

It is the root module of the app. An NgModule is a class decorator decorated with@NgModule(), whose properties describe the module. The @NgModule() decorator is a function that accepts a single metadata object.

Let’s see the most important properties-

Declarations Array (declarations)

It is an array of created components, directives and pipes, which belongs to this NgModule. Whenever we have to add the new component, firstly it will be imported and then the reference must be included in declarations as shown below –

APP.MODULE.TS

declarations: [
   AppComponent,
   NewComponent
]

And is the same for the directives and pipes.

Note: Only declarable components, Pipes, and directives can be added in the declaration array. We can't declare any other NgModule class, Service class, or any other model class in it.

Imports Array (imports)

The only @NgModule section includes imports or import array which add other angular modules. All of them decorated with the @NgModule are added to the imports array.

In other way, we can say that those modules are included in the Imports array whose features are needed in the application. Look at the code below-

APP.MODULE.TS

imports: [
   BrowserModule,
   FormsModule
 ]

This property imports the BrowserModule while application is executing in the browser. BrowserModule must be imported into the application for those applications which need the browser.

Providers Array (providers)

Angular apps mainly depend on the dependency injection services to work properly so providers array helps in creating these services before using them in the application.

So, for example, if we have data service which is required for the some others module, will be injected into the app Module and after that, it can be used across the components.

APP.MODULE.TS

providers: [Someservice],

Bootstrapping an Application

To bootstrap our module based application, we need to inform Angular that which one is our root component to perform the compilation in the browser.

This compilation done in the browser is also known as "Just in Time" (JIT) compilation, which hosts all other app views.

APP.MODULE.TS

//Here the component to be bootstrapped or start  
    bootstrap: [AppComponent]

Bootstrapping in main.ts file

The bootstrapping of AppModule is performed in main.ts file. Angular offers many boot options. Here, we look two options.

Dynamic bootstrapping of Module with the JIT(Just-In-Time) compiler

In this option, Angular compiles the application in the browser and after successfully completing the application,it launches the application.

DYNAMIC BOOTSTRAPPING OF MODULE - MAIN.TS

//Browser platform with a compiler  
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';  
  
//Application module  
import { AppModule } from './app.module';  
  
//Compile and load application module  
platformBrowserDynamic().bootstrapModule(AppModule);

Static bootstrapping with the AOT (Ahead-Of-Time) compiler

In this option, ahead of time, part of the compiler is executed as part of the build and generates many class factories. The "AppModuleNgFactory" module is one of these. The bootstrap done with AppModuleNgFactory is very similar to the dynamic version.

Here, the entire application has been pre-filled. Therefore, the angular compiler does not need to compile the application in the browser. The application code used in static compilation is much smaller than dynamic compilation and is also ready to run immediately.

STATIC BOOTSTRAPPING OF MODULE - MAIN.TS

//Browser platform with a compiler  
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';  
  
//Application module  
import { AppModule } from './app.module';  
  
//Compile and load application module  
platformBrowserDynamic().bootstrapModule(AppModule);

Both compilers (JIT and AOT) generate the AppModuleNgFactory class from the AppModule code. The JIT compiler creates this class at run time in the browser's memory and the AOT compiler creates the physical file for this class. This class must be imported into the static version of the main.cs file.

Why NgModule?

Whenever we create an angular application, it is automatically created with the Angular CLI.

1. First of all, what you should do in Angular is to load a root NgModule :

platformBrowserDynamic().bootstrapModule(AppModule);

2. The purpose of NgModule is to declare everything that has been created in angular and group it.

NgModule(scopes / visibility)

The doubt starts with the components and services of not having the same scope/visibility:

• declarations: - (private visibility)

For eg- if you have declared components in declarations [ ] section then all are in local scope.

• Providers:- (public visibility)

For eg- if you have declared services, then (mainly) all are in global scope.

It means the components you have declared are only operational in the current module. If you have to use them outside or in other modules, then you’ll have to export them as shown below:

MAIN.TS

import { NgModule } from '@angular/core';

import { SomeComponent } from './some.component';
import { SomeDirective } from './some.directive';
import { SomePipe } from './some.pipe';

@NgModule({
  declarations: [SomeComponent, SomeDirective, SomePipe],
  exports: [SomeComponent, SomeDirective, SomePipe]
})
export class SomeModule {}

On the contrary, the services you have provided will mainly be available/injectable anywhere in your app, in every module.